angularjs 指令Directive（七）
文章目录
- 文章参考
- 什么是指令？
- restrict
- priority
- terminal
- template
- replace
- scope
- scope 为{} 的三种传递值方式
- require(字符串或者数组)
- transclude
- controller
- 字符串
- 函数
- 链接函数 Linking function
文章参考
- 学习AngularJs:Directive指令用法（完整版）
什么是指令？
指令就是一些附加在HTML元素上的自定义标记（例如：属性，元素，或css类），它告诉AngularJS的HTML编译器 ($compile) 在元素上附加某些指定的行为，甚至操作DOM、改变DOM元素，以及它的各级子节点
restrict
‘AE’ - 既匹配属性名又匹配元素名
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行
terminal
（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)
template
replace
（布尔值），默认值为false，设置为true时候，我们再来看看下面的例子（对比下在template时候举的例子）
scope
（1）默认值false。表示继承父作用域;
（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;
（3）{}。表示创建一个全新的隔离作用域；
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS入门学习title>
<script src="../public/js/angular.min.js">script>
head>
<body>
<div ng-controller="MainController">
父亲:{{name}}
<input ng-model="name" />
<div my-directive>div>
div>
body>
<script type="text/javascript">
var app = angular.module('myApp', [])
app.controller('MainController', function ($scope) {
$scope.name = '林炳文'
})
app.directive('myDirective', function () {
return {
restrict: 'EA',
scope: true,
// scope: false,
// scope: {},
template: '儿子:{{ name }}',
}
})
script>
html>
scope 为{} 的三种传递值方式
- @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
子组件不会影响父组件
<html ng-app="myApp">
<head>
<script src="../public/js/angular.min.js">script>
<style>
div.spicy div {
padding: 10px;
border: solid 2px blue;
}
style>
head>
<body>
<div ng-controller="myController">
<div class="result">
<div>父scope：
<div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name" />div>
div>
<div>隔离scope：
<div isolated-directive name="{{name}}">div>
div>
<div>隔离scope（不使用父scope {{name}}）：
<div isolated-directive name="name">div>
div>
div>
body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("myController", function ($scope) {
$scope.name = "hello world";
}).directive("isolatedDirective", function () {
return {
scope: {
name: "@"
},
template: 'Say：{{name}}
改变隔离scope的name：'
};
});
script>
html>
- & 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
长用于方法调用
<html ng-app="myApp">
<head>
<script src="../public/js/angular.min.js">script>
<style>
div.spicy div {
padding: 10px;
border: solid 2px blue;
}
style>
head>
<body>
<div ng-controller="myController">
<div>
父scope：
<div>Say：{{value}}div>
div>
<div>
隔离scope：
<div isolated-directive action="click()">div>
div>
div>
body>
<script type="text/javascript">
var app = angular.module('myApp', [])
app
.controller('myController', function ($scope) {
$scope.value = 'hello world'
$scope.click = function () {
$scope.value = Math.random()
}
})
.directive('isolatedDirective', function () {
return {
scope: {
action: '&',
},
template: '',
}
})
script>
html>
- = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
父子组件会相互影响
<html ng-app="myApp">
<head>
<script src="../public/js/angular.min.js">script>
<style>
div.spicy div {
padding: 10px;
border: solid 2px blue;
}
style>
head>
<body>
<div ng-controller="myController">
<div>
父scope：
<div>
Say：{{user.name}}
<br />
改变父scope的name：
<input type="text" value="" ng-model="userBase.name" />
div>
div>
<div>
隔离scope：
<div isolated-directive user="userBase">div>
div>
div>
body>
<script type="text/javascript">
var app = angular.module('myApp', [])
app
.controller('myController', function ($scope) {
$scope.userBase = {
name: 'hello',
id: 1,
}
})
.directive('isolatedDirective', function () {
return {
scope: {
user: '=',
},
template: 'Say：{{user.name}}
改变隔离scope的name：',
}
})
script>
html>
require(字符串或者数组)
- 字符串代表另一个指令的名字，它将会作为link函数的第四个参数
应用场景： B 指令一定要依赖A 指令
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS入门学习title>
<script src="../public/js/angular.min.js">script>
head>
<body>
<outer-directive>
<inner-directive>inner-directive>
<inner-directive2>inner-directive2>
outer-directive>
<script>
var app = angular.module('myApp', [])
app.directive('outerDirective', function () {
return {
scope: {},
restrict: 'AE',
controller: function ($scope) {
this.say = function (someDirective) {
console.log('Got:' + someDirective.message)
}
},
}
})
app.directive('innerDirective', function () {
return {
scope: {},
restrict: 'AE',
require: '^outerDirective',
template: '{{message}}',
link: function (scope, elem, attrs, controllerInstance) {
scope.message = 'Hi,leifeng'
controllerInstance.say(scope)
scope.sayAction = function () {
controllerInstance.say(scope)
}
},
}
})
app.directive('innerDirective2', function () {
return {
scope: {},
restrict: 'AE',
require: '^outerDirective',
template: '{{message}}',
link: function (scope, elem, attrs, controllerInstance) {
scope.message = 'Hi,shushu'
controllerInstance.say(scope)
scope.sayAction = function () {
controllerInstance.say(scope)
}
},
}
})
script>
body>
html>
transclude
如果不想让指令内部的内容被模板替换，可以设置这个值为true。
controller
字符串
angular.module('myApp', []).directive('myDirective', function () {
return {
restrict: 'A', // 始终需要
controller: 'SomeController',
}
})
// 应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件
angular.module('myApp').controller('SomeController', function ($scope, $element, $attrs, $transclude) {
// 控制器逻辑放在这里
})
函数
参数
（1） s c o p e ， 与 指 令 元 素 相 关 联 的 作 用 域 （ 2 ） scope，与指令元素相关联的作用域 （2） scope，与指令元素相关联的作用域（2）element，当前指令对应的 元素
（3） a t t r s ， 由 当 前 元 素 的 属 性 组 成 的 对 象 （ 4 ） attrs，由当前元素的属性组成的对象 （4） attrs，由当前元素的属性组成的对象（4）transclude，嵌入链接函数，实际被执行用来克隆元素和操作DOM的函数
angular.module('myApp', []).directive('myDirective', function () {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs, $transclude) {
// 控制器逻辑放在这里
},
}
})
链接函数 Linking function
链接函数负责注册DOM事件和更新DOM
function link(scope, iElement, iAttrs, controller) { ... }