您好,登錄后才能下訂單哦!
如果我們具有下面的DOM結(jié)構(gòu):
<div ng-controller="MyCtrl"> <loader>滑動加載</loader> </div>
同時我們的控制器具有如下的簽名:
var myModule = angular.module("MyModule", []); //首先定義一個模塊并在模塊下掛載控制器,第二個參數(shù)為一個數(shù)組,其中函數(shù)前面的參數(shù)都是會被注入到函數(shù)形參上面的 myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.loadData=function(){ console.log("加載數(shù)據(jù)中..."); } }]);
同時指令的簽名如下:
myModule.directive("loader", function() { return { restrict:"AE",//Element,Attribute link:function(scope,element,attrs){ element.bind('mouseenter', function(event) { //scope.loadData(); // scope.$apply("loadData()"); // 注意這里的坑,howToLoad會被轉(zhuǎn)換成小寫的howtoload }); } } });
這時候我們的指令通過scope.loadData或者scope.$apply就可以完成對控制器的調(diào)用了。但是如果我們具有兩個控制器呢?而且兩個控制器中$scope中方法是不同的?
var myModule = angular.module("MyModule", []); //首先定義一個模塊并在模塊下掛載控制器,第二個參數(shù)為一個數(shù)組,其中函數(shù)前面的參數(shù)都是會被注入到函數(shù)形參上面的 myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.loadData=function(){ console.log("加載數(shù)據(jù)中..."); } }]); myModule.controller('MyCtrl2', ['$scope', function($scope){ $scope.loadData2=function(){ console.log("加載數(shù)據(jù)中...22222"); } }]);
這時候在我們的指令中如何調(diào)用方法呢,按照上面的方式的話那么那么就會面臨問題:MyCtrl2沒有我們的loadData,而只有l(wèi)oadData2!這時候我們就需要使用后面的指令自定義屬性了!
我們定義了兩個controller控制器,分別為MyCtrl,MyCtrl2,這兩個控制器都使用了我們自己定義的指令load:
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <!--第一個控制器MyCtrl--> <div ng-controller="MyCtrl"> <loader howToLoad="loadData()">滑動加載</loader> </div> <!--第二個控制器MyCtrl2--> <div ng-controller="MyCtrl2"> <loader howToLoad="loadData2()">滑動加載</loader> </div> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="Directive&Controller.js"></script> </html>
我們自定義了Controller代碼如下:
var myModule = angular.module("MyModule", []); //首先定義一個模塊并在模塊下掛載控制器,第二個參數(shù)為一個數(shù)組,其中函數(shù)前面的參數(shù)都是會被注入到函數(shù)形參上面的 myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.loadData=function(){ console.log("加載數(shù)據(jù)中..."); } }]); myModule.controller('MyCtrl2', ['$scope', function($scope){ $scope.loadData2=function(){ console.log("加載數(shù)據(jù)中...22222"); } }]); //在模塊下掛載一個loader指令 myModule.directive("loader", function() { return { restrict:"AE",//Element,Attribute link:function(scope,element,attrs){ element.bind('mouseenter', function(event) { //scope.loadData(); // scope.$apply("loadData()"); // 注意這里的坑,howToLoad會被轉(zhuǎn)換成小寫的howtoload // scope.$apply(attrs.howtoload); //其中scope為POJO,但是有一系列的工具方法如$watch,$apply等 }); } } });
很顯然這里有兩個控制器,分別為MyCtrl和MyCtrl2,我們的指令如何知道調(diào)用那一個Controller?這時候我們就需要為我們的指令指定不同的屬性,用這個屬性來判斷不同的controller調(diào)用,這樣我們的指令就可以在不同的controller中調(diào)用了!
總結(jié):之所以定義指令就是為了復(fù)用,為了讓指令和不同的控制器進(jìn)行交互就會為指令定義不同的配置項,這就是指令和控制器進(jìn)行數(shù)據(jù)交互的原理之所在!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。