【AngularJS】—— 11 指令的交互

時間 2019-11-19

標籤 AngularJS 指令交互欄目 AngularJS 简体版

原文原文鏈接

前面基本瞭解了指令的相關內容：javascript

　　1 如何自定義指令html

　　2 指令的複用java

本篇看一下指令之間如何交互。學習內容來自《慕課網指令3》app

　　背景介紹ide

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

　　這三種能力做爲三種屬性，定義動感超人做爲一個標籤，只要添加對應的屬性就能擁有該能力。ui

　　爲了便於結果的展現，爲標籤添加鼠標的響應事件，當鼠標移動到對應的標籤上就會觸發一個方法，打印出具有的能力。this

　　程序分析

　　html部分的代碼以下：spa

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

　　下面看看如何實現，首先依然是建立一個模塊：rest

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

　　在該模塊的基礎上，建立標籤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); }); } } });

　　這裏不一樣的是，在方法內部有一個controller屬性，這個並非ng-controller這種控制器，而是指令對外開放的一個接口，裏面聲明的方法，在外部能夠做爲公開的方法使用，其餘的指令能夠經過依賴，使用這些方法。

　　接下來再建立三個能力對應的指令

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中多了一個參數supermanCtrl，這個參數猜測是superman中的controller，因此命名採用superman+Ctrl的方式。

　　【因爲不懂內部原理，這裏僅僅是猜測，可是實驗證實，若是改變這個參數的名字，會報錯。】

　　聲明瞭這三個指令，就能夠把這三個指令當作super的屬性來使用，當註明該屬性時，就會觸發內部的link內的方法，調用superman中公開的方法。

　　總結起來，指令的交互過程：

　　1 首先建立一個基本的指令，在controller屬性後，添加對外公開的方法。

　　2 建立其餘交互的指令，在require屬性後，添加對應的指令依賴關係；在link中調用公開的方法

　　所有程序代碼：

<!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>

　　運行結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。