AngularJS指令間的交互

本文將介紹AngularJS中指令間的交互方法。

假設我們有這樣一個場景，

在一個html元素中有多條指令，且指令間有一些邏輯上的交互。

那么，我們如何來創(chuàng)建這些指令，而且讓這些指令能夠交互起來呢？

看下面的html代碼，

<superman strength>動感超人---力量</superman>
<superman strength speed>動感超人2---力量+敏捷</superman>
<superman strength speed light>動感超人3---力量+敏捷+發(fā)光</superman>

從代碼中可以看出，上面html代碼中包含了4個自定義的指令superman，strength，speed和light。

其中superman指令的代碼如下，

var myModule = angular.module("MyModule", []);
myModule.directive("superman", function() {
    return {
        scope: {},
        restrict: 'AE',
        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, attrs) {
            element.bind("mouseenter", function() {
                console.log(scope.abilities);
            });
        }
    }
});

superman指令中的scope屬性表示該指令的獨立作用域，指令的獨立作用域其實是跟指令的實例綁定的，即不同的指令實例，其獨立作用域是不同的。這是復用指令的必要條件。

superman指令中的restrict屬性表示該指令的使用形式。有4個選項：EAMC?？梢詤⒖贾暗?a rel="external nofollow" target="_blank" target="_blank">一篇文章，這里不多作解釋。

superman指令中的controller屬性是指令內部的控制器。其目的一般是為該指令暴露一些接口供外部使用?？刂破骱瘮?shù)的參數(shù)$scope就是指向該指令的獨立作用域。

其他三個指令的代碼如下，

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

這里需要注意的地方就是，strength，speed及light指令的定義中使用了require屬性，這個require的解釋如下，

請求另外的controller，傳入當前directive的linking function中。require需要傳入一個directive controller的名稱。如果找不到這個名稱對應的controller，那么將會拋出一個error。名稱可以加入以下前綴：

? 不要拋出異常。這將使得這個依賴變?yōu)橐粋€可選項。

^ 允許查找父元素的controller。

在這里，這三個指令都依賴之前的superman指令。且在指令的link方法中使用了第四個參數(shù)supermanCtrl，這個參數(shù)其實就是指令superman的controller的注入。所以在這三個指令的link方法中可以使用superman指令控制器中定義的幾個方法。

最開始的那一段html代碼的運行效果就是，

• 鼠標劃過文本時，會在console中輸出$scope.abilities的值
• 因為superman指令中abilities屬性其實是屬于獨立作用域的，所以html中每一行的superman都會有一個獨立的abilities屬性

總結：指令間的交互依賴指令的controller創(chuàng)建一些供外部調用的接口，而調用這些接口的指令需要require接口的指令名稱。