指令=@&的传值和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>