angularjs之間如何實現指令和指令之間的互動
阿新 • • 發佈：2018-12-13
我們看看下面的頁面的結構：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="Directive&Directive.js"></script> </head> <body> <div class="row"> <div class="col-md-3"> <superman strength>動感超人---力量</superman> </div> </div> <div class="row"> <div class="col-md-3"> <superman strength speed>動感超人2---力量+敏捷</superman> </div> </div> <div class="row"> <div class="col-md-3"> <superman strength speed light>動感超人3---力量+敏捷+發光</superman> </div> </div> </body> </html>
我們給superman這個指令通過controller方法暴露一組public方法用於給外部呼叫：
var myModule = angular.module("MyModule", []); //在模組上面定義了一個自定義的指令superman myModule.directive("superman", function() { return { scope: {}, restrict: 'AE', controller: function($scope,$element,$attrs,$transclude) { //這裡的this就是Constructor {}，表示當前的控制器函式本身 $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.addClass('btn btn-primary'); //為元素新增class類名並且為元素綁定了mouseenter事件，當滑鼠進入到指定的元素的時候會列印相應的陣列集合 element.bind("mouseenter", function() { console.log(scope.abilities); }); } } }); myModule.directive("strength", function() { return { require: '^superman', //require設定為字串代表另外一個指令的名字，require會將控制器注入到其值所指定的指令中，並作為當前指令的連結函式的第四個引數 link: function(scope, element, attrs, supermanCtrl) { supermanCtrl.addStrength(); } } }); myModule.directive("speed", function() { return { require: '^superman', //其中^表示：指令會在上游的指令鏈中查詢require引數指定的控制器，?表示如果當前指令沒有查到指定的控制器就返回null link: function(scope, element, attrs, supermanCtrl) { supermanCtrl.addSpeed(); } } }); myModule.directive("light", function() { return { require: '^superman', link: function(scope, element, attrs, supermanCtrl) { supermanCtrl.addLight(); } } });
注意：controller中是為了暴露方法給外部呼叫，而link用於處理指令內部的事務，如繫結事件和資料等
總結：指令與指令之間的互動是通過為指令指定一個controller函式用於暴露給外部的指令進行呼叫的!