指令=@&的传值和require引用

指令=@&的传值和require引用

一、使用@实现单向绑定

当这里的属性名和模板里表达式{{}}里面使用的名称相同的话，就可以省略掉@后面的属性名了，然后写成下面的形式。

scope{  color:'@'}

<hello color="{{color}}"></hello>

从指令中scope的值可以看出，指令模板中的表达式{{}}里的color的指向的是当前元素元素的color属性，这个color属性的值就是父scope的属性color的值。父scope把他的color属性值传递给了当前元素的color属性，然后color属性又把值传递给了模板中表达式里的color，这个过程是单向的。

---

二：使用=实现双向绑定

.directive('hello', function () {   return{    restrict:'AECM',    replace:true,    template:'<button style="background-color: {{color}}">click me</button>',    scope:{     color:'='    },    link: function (scope,elements,attrs) {     elements.bind('click', function () {      elements.css('background-color','blue');      scope.$apply(function () {       scope.color='pink';      })     })    }   }  })

<hello color="color"></hello><input type="text" ng-model="color"/>

上例中，指令的scope中的color属性和父scope中的color属性进行了双向绑定，并且给指令的link函数里，bind了一个click事件，点击按钮会让按钮的颜色变成blue，并且改变指令scope的color属性的值，再给HTML页面中加了一个input标签，输出或者输入父scope的color属性的值。

---

三：使用&调用父scope里的方法

var myapp=angular.module('myapp',[])  .controller('myctrl',['$scope', function ($scope) {  //父级scope中定义的变量color和方法sayhello（）   $scope.color='red';   $scope.sayhello= function () {    alert('hello');   };  }])  .directive('hello', function () {   return{    restrict:'AECM',    replace:true,    template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',    scope:{    //传值，用=传值，用&传递方法，传递后就可以在指令标签内调用color和sayHello方法     color:'=',     sayhello:'&'    },    link: function (scope,elements,attrs) {     elements.bind('click', function () {      elements.css('background-color','blue');      scope.$apply(function () {       scope.color='pink';      })     })    }   }  })

<hello color="color" sayhello="sayhello()"></hello><input type="text" ng-model="color"/>

require使用

当想要其他的指令和你的指令发生交互时，需要使用 require进行controller的继承引用。

.directive('hello', function () {   return{    scope:{},    require:'^he',    compile: function (element,attrs) {     return function (scope,elements,attrs,cntIns) {      cntIns.fn()     };    }   }  })  .directive('he', function () {   return {    restrict:'AE',    scope:{},    controller: function ($scope, $compile, $http) {     this.fn= function () {      alert('hello');     };    }   }  })

<he> <hello color="color" sayhello="sayhello()"></hello></he>