详解angularJs指令的3种绑定策略

喜欢ヅ旅行 2024-03-23 13:47 128阅读 0赞

## 详解angularJs指令的3种绑定策略 ##

*  公司最近大量使用angularJs做单页面应用，就免不了使用angularJs的一些组件，而有的组件网上有现成的，不必操心，而有的就得自食其力，先前对指令这一块的封装一直理解的不够，故每次使用directive时抽象性都做得不好，往往移植性很差，而要将抽象做好，就不得不使用指令中的隔离作用域，而光有隔离作用域又不能做好前后文的通信问题，要解决通信的问题，就要使用指令中的绑定，正好最近要用，顺便就整理了一些关于指令中的3种绑定策略，并谈了一些自己的理解。
 *  angularJs中指令scope隔离域绑定有3种策略：如
 *      .directive("abc",function(){
           return {
             scope:{          
                title:"@",      
                name:"=",      
                changeNum:"&"    
             } 
        /* 出现了scope就表示这个指令的scope是独立的，但如果要与外界联系，就要使用绑定策略*/
        /*使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即我们通过@得到title属性的值*/
        /*使用=符号可将本地作用域上的属性与父级作用域上的属性进行双向绑定，即我们通过=得到name的引用。可以同值传递和引用传递的理解相结合*/
        /*使用&符号可以对父级作用域进行绑定，以便在其中运行函数，简单说就是绑定函数用的*/
           }
        })
 *  举一个详细的例子：
 *  html
 *      <div ng-controller="test">
        <div>AngularJs指令的三种绑定策略</div>
        <example title="titleExample" name="nameExample" send-message="parentSendMessage('example')">
        </example>
        </div>
 *  说明：example是自定义的指令，用以展示指令的三种绑定策略。使用@来绑定title，以获取DOM中的属性值。
 *      directive:
           myApp.directive("example",function(){
            return {
              restrict:"E",
              scope:{
                title:"@", 
              },
              link:function($scope,element,attrs){
                console.log($scope.title); ==> titleExample
              }
            } 
           })
 *  说明：@绑定策略，可以将title值与父级作用域的值绑定，比如父级作用域有一个属性是testTitle，我们想将指令中的title属性的值与父级作用域中testTitle的值绑定，故我们可以在HTML将指令改写成，这样我们就可以在.directive中通过子作用域中的 s c o p e . t i t l e 获取到父级作用域 scope.title获取到父级作用域 scope.title获取到父级作用域scope.testTitle的值。
 *  使用=来绑定name，以将子作用域与父作用域的属性进行双向绑定。
 *      directive:
           myApp.directive("example",function(){
            return {
              restrict:"E",
              scope:{
                name:"=",
              },
              link:function($scope,element,attrs){
                console.log($scope.name); ==> nameTest
              }
            }
           })
             
          //父级作用域的控制器
           controller：
           myApp.controller("test",function($scope){
             $scope.nameExample = "nameTest"
           })
 *  说明：在实际生产中，这一绑定策略十分有效，譬如说，假定我在指令中要返回一个对象给父级作用域，这时通过“@“这一"值传递"方法已经不能满足需求了，此时就应该考虑”=“这一"引用传递”，因为通过name="nameExample"这一声明，就将子作用域的 s c o p e . n a m e 与父作用域的 scope.name与父作用域的 scope.name与父作用域的scope.nameExample绑定在一起，可以认为他们指向同一地址，不论修改哪个都会影响对方。
 *  使用&来绑定sendMessage ，以将子作用域与父作用域的方法进行绑定。
 *      directive:
           myApp.directive("example",function(){
            return {
              restrict:"E",
              scope:{
                sendMessage:"&",
              },
              link:function($scope,element,attrs){
              }
            }
           })
        
          //父级作用域的控制器
           controller：
           myApp.controller("test",function($scope){
             $scope.parentSendMessage = function(content){
                alert(content);
             }
           })
 *  说明：可以看到"&"绑定就是让子作用域可以使用父级作用域中的方法，这样就可以利用父级作用域 s c o p e . p a r e n t S e n d M e s s a g e ( ) 中的一些数据进行运算，并将结果返回给子作用域 scope.parentSendMessage ()中的一些数据进行运算，并将结果返回给子作用域 scope.parentSendMessage()中的一些数据进行运算，并将结果返回给子作用域scope.sendMessage() 。