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

小鱼儿 2021-09-11 05:18 225阅读 0赞

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

### 一、使用@实现单向绑定 ###

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

scope{
      color:'@'
    }

从指令中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';
          })
         })
        }
       }
      })

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

--------------------

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

### 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');
         };
        }
       }
      })