AngularJS 指令的交互詳解及實例代碼

更新時間：2016年09月14日 17:32:22 作者：xingoo

這篇文章主要介紹了AngularJS 指令的交互，這里整理了詳細(xì)的資料及實例代碼，有興趣的小伙伴可以參考下

　　背景介紹

　　這例子是視頻中的例子，有一個動感超人，有三種能力，力量strength，速度speed，發(fā)光light。

　　這三種能力作為三種屬性，定義動感超人作為一個標(biāo)簽，只要添加對應(yīng)的屬性就能擁有該能力。

　　為了便于結(jié)果的展示，為標(biāo)簽添加鼠標(biāo)的響應(yīng)事件，當(dāng)鼠標(biāo)移動到對應(yīng)的標(biāo)簽上就會觸發(fā)一個方法，打印出具備的能力。

　　程序分析
　　html部分的代碼如下：

 <div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>

　　下面看看如何實現(xiàn)，首先依然是創(chuàng)建一個模塊：

var myAppModule = angular.module("myApp",[]);

　　在該模塊的基礎(chǔ)上，創(chuàng)建標(biāo)簽superman，與前面類似。

myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          controller:function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){
              $scope.abilities.push("speed");
            };
            this.addLight = function(){
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });

　　這里不同的是，在方法內(nèi)部有一個controller屬性，這個并不是ng-controller這種控制器，而是指令對外開放的一個接口，里面聲明的方法，在外部可以作為公開的方法使用，其他的指令可以通過依賴，使用這些方法。

　　接下來再創(chuàng)建三個能力對應(yīng)的指令

    myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });

　　三個指令的代碼都差不多，其中require指定了依賴的指令。

　　link中多了一個參數(shù)supermanCtrl，這個參數(shù)猜想是superman中的controller，所以命名采用superman+Ctrl的方式。

　　【由于不懂內(nèi)部原理，這里僅僅是猜想，但是實驗證明，如果改變這個參數(shù)的名字，會報錯?！?/p>

　　聲明了這三個指令，就可以把這三個指令當(dāng)做super的屬性來使用，當(dāng)注明該屬性時，就會觸發(fā)內(nèi)部的link內(nèi)的方法，調(diào)用superman中公開的方法。　　

　　總結(jié)起來，指令的交互過程：

　　1 首先創(chuàng)建一個基本的指令，在controller屬性后，添加對外公開的方法。

　　2 創(chuàng)建其他交互的指令，在require屬性后，添加對應(yīng)的指令依賴關(guān)系；在link中調(diào)用公開的方法

　　全部程序代碼：

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>

    <div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);

      myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          controller:function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){
              $scope.abilities.push("speed");
            };
            this.addLight = function(){
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });
      myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });
    </script>
  </body>
</html>

　運(yùn)行結(jié)果：