如果我們具有下面的DOM結(jié)構(gòu)：
<div ng-controller="MyCtrl"> <loader>滑動(dòng)加載</loader> </div>
同時(shí)我們的控制器具有如下的簽名：
var myModule = angular.module("MyModule", []); //首先定義一個(gè)模塊并在模塊下掛載控制器，第二個(gè)參數(shù)為一個(gè)數(shù)組，其中函數(shù)前面的參數(shù)都是會(huì)被注入到函數(shù)形參上面的 myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.loadData=function(){ console.log("加載數(shù)據(jù)中..."); } }]); 同時(shí)指令的簽名如下：
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會(huì)被轉(zhuǎn)換成小寫(xiě)的howtoload }); } } }); 這時(shí)候我們的指令通過(guò)scope.loadData或者scope.$apply就可以完成對(duì)控制器的調(diào)用了。但是如果我們具有兩個(gè)控制器呢?而且兩個(gè)控制器中$scope中方法是不同的?
var myModule = angular.module("MyModule", []); //首先定義一個(gè)模塊并在模塊下掛載控制器，第二個(gè)參數(shù)為一個(gè)數(shù)組，其中函數(shù)前面的參數(shù)都是會(huì)被注入到函數(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"); } }]); 這時(shí)候在我們的指令中如何調(diào)用方法呢，按照上面的方式的話那么那么就會(huì)面臨問(wèn)題：MyCtrl2沒(méi)有我們的loadData，而只有l(wèi)oadData2!這時(shí)候我們就需要使用后面的指令自定義屬性了!
我們定義了兩個(gè)controller控制器，分別為MyCtrl,MyCtrl2,這兩個(gè)控制器都使用了我們自己定義的指令load:
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <!--第一個(gè)控制器MyCtrl--> <div ng-controller="MyCtrl"> <loader howToLoad="loadData()">滑動(dòng)加載</loader> </div> <!--第二個(gè)控制器MyCtrl2--> <div ng-controller="MyCtrl2"> <loader howToLoad="loadData2()">滑動(dòng)加載</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", []); //首先定義一個(gè)模塊并在模塊下掛載控制器，第二個(gè)參數(shù)為一個(gè)數(shù)組，其中函數(shù)前面的參數(shù)都是會(huì)被注入到函數(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"); } }]); //在模塊下掛載一個(gè)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會(huì)被轉(zhuǎn)換成小寫(xiě)的howtoload // scope.$apply(attrs.howtoload); //其中scope為POJO，但是有一系列的工具方法如$watch,$apply等 }); } } });
新聞熱點(diǎn)
疑難解答
圖片精選
