AngularJS指令間的交互

2018-06-07 18:42 更新

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

假設(shè)我們有這樣一個場景,

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

那么,我們?nèi)绾蝸韯?chuàng)建這些指令,而且讓這些指令能夠交互起來呢?

看下面的html代碼,


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

從代碼中可以看出,上面html代碼中包含了4個自定義的指令superman,strength,speedlight

其中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屬性是指令內(nèi)部的控制器。其目的一般是為該指令暴露一些接口供外部使用??刂破骱瘮?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,speedlight指令的定義中使用了require屬性,這個require的解釋如下,

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

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

^ 允許查找父元素的controller。

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

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

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

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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號