符号
说明
示例
@
值传递，单向绑定。html页面自定义指令里的val属性的值可传给link的scope使用。第一种写法——str : “@”，这种写法html页面的指令属性名为str
str : “@val”,属性名为val
=
双向绑定数据到指令的属性中，数据值可以是任意类型的。第一种写法：name : “=”，这种写法html页面的自定义指令属性名就是name
name : “=username”,属性名是username
&
使用父作用域中的一个函数,可以在指令中调用。第一种写法：getName:”&”,这种写法html页面的自定义指令属性名就是gegName
getName : “&getUserName”,属性名是getUserName
其余两种符号用法：
<!-- @符号的用法 --> <body > <div ng-app="myApp" ng-controller="myController"> <!-- 引用自定义指令 --> <my-directive title="obj" str="abcd">自定义指定令的内容555</my-directive> </div> <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { $scope.obj="父作用域";//父作用域给自定义指令属性赋的值 }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<p >模板内容</p>", scope:{ title:"=", str:"@" }, link: function postLink(scope, iElement, iAttrs) { console.log(scope.str) console.log(scope.title) } }; }); </script> </body>
<!-- &符号的用法 --> <body > <div ng-app="myApp" ng-controller="myController"> <!-- 引用自定义指令 --> <my-directive fun="test()"></my-directive> </div> <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { $scope.test = function(){ console.log('自定义指令会调用该法，所以这句话会打印到控制台上') } }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<p >模板内容</p>", scope:{ fun:"&"//属性名直接是fun }, link: function postLink(scope, iElement, iAttrs) { scope.fun();//调用父作用域的方法，好似不能传参，未深究。 } }; }); </script> </body>
5.controller属性
controller属性用于提供对外的接口，即该自定义指令会被其他自定义指令调用。所谓的接口，就是this后的变量或方法。
controller可以使用的参数，作用域、节点、节点的属性、节点内容的迁移，这些都可以通过依赖注入被传进来，所以你可以根据需要只写要用的参数，有$scope,Z$element, $attrs, $transclude。
调用该自定义指令的指令需要放在该指令之间。假定firstDirective指令是要被调用的自定义指令，expander是调用者指令。如下：
<first-directive> <expander ng-repeat="item in list" attribute="list">{{item.title}}:{{item.text}}</expander> </first-directive>
既然firstDirective内部还有指令，则firstDirective必须配置transclude属性为true。代码如下：
//用于被调用的自定义指令 app.directive('firstDirective',function(){ return { template : '<div ng-transclude></div>', replace : true, transclude : true, controller :function(){ this.getData = function(val){ var data = 3 * val; return data; } this.a = "abc"; } } });
调用其他指令的自定义指令必须配置require属性指定指令名。然后在link函数里就可注入要调用的指令。
//自定义指令 app.directive('expander',function(){ return { templateUrl : 'template.html', replace : true, transclude : true, require : '^?firstDirective',//引用其他自定义指令，^表示从父节点开始找，?表示将告诉$compile服务，如果所需的指令没找到，不要抛出异常 scope : { title : '=attribute' }, link : function(scope,element,attris,firstDirct){//注入 console.log(firstDirct.a)//调用其他指令的变量 console.log(firstDirct.getData(6)) //调用其他指令的方法 } }; });
6.link属性用法
link后的方法在指令中负责执行DOM 操作和注册事件监听器等。link函数有五个参数(scope,element,attrs,controller,linker)。link 方法的参数解释：
scope: 它与自定义指令里的scope属性是一个东西。它是指令scope的引用，所以可改名为sco等其他名字。scope 变量在初始化时是不被定义的，link 方法会注册监视器监视值变化事件。
element: 包含指令的DOM元素的引用， link 方法一般通过jQuery 操作实例（如果没有加载jquery，还可以使用Angular's jqLite ）。