標籤：
前言：前段時間我們學習了angular的指令，他通過ECMA的方式建立元素，可以讓我們共用這些元素，我們也知道可以通過 link的方法給這個指令添加一些動作事件，本節，我們將寫入和讓angular的指令能和控制器進行互動。
1，指令和控制器的互動<!DOCTYPE html><html ng-app="MyController"><head> <meta charset="utf-8"> <title>指令複用</title></head><body> <div ng-controller="MyCtrl"> <loader>滑動載入</loader> </div></body><script src="js/angular-1.3.0.js"></script><script src="js/directive-controller.js"></script></html>
上面的代碼平淡無奇，有個控制器有個指令（loader），下面可以看到我們通過 directive建立了這個指令，並且我們通過link的方法給他賦值滑鼠事件(mouseenter)。
var myModule = angular.module(‘MyController‘,[]);myModule.controller(‘MyCtrl‘,function($scope){ $scope.loadData = function(){ console.log("載入資料..."); }})myModule.directive(‘loader‘,function(){ return{ restrict:‘AE‘, link:function(scope,element,attr){ element.bind(‘mouseenter‘,function(){ scope.loadData(); }) } }})
我們來看看啟動並執行結果，ok，我們列印出來 ”載入資料...“。
2，多個控制器如何公用一個指令？我們建立指令的目的就是在於，能夠複用它，當然這也是MVC的終極思想。
我們的代碼也發生了一些變化
<!DOCTYPE html><html ng-app="MyController"><head> <meta charset="utf-8"> <title>指令複用</title></head><body> <div ng-controller="MyCtrl"> <loader loadDataFn="loadData()">滑動載入</loader> </div> <div ng-controller="MyCtr2"> <loader loadDataFn="loadData2()">滑動載入2</loader> </div></body><script src="js/angular-1.3.0.js"></script><script src="js/directive-controller.js"></script></html>
首先，我們建立了兩個控制器 MyCtr1 和 MyCtr2，同時呢，我們給 loader 這個指令，加了一個自訂的屬性叫 loadDataFn，給他賦的值是下面js中的兩個對應控制器中的方法loadData()和loadData2()；
var myModule = angular.module(‘MyController‘,[]);myModule.controller(‘MyCtrl‘,function($scope){ $scope.loadData = function(){ console.log("載入資料..."); }})myModule.controller(‘MyCtr2‘,function($scope){ $scope.loadData2 = function(){ console.log("載入資料2..."); }})myModule.directive(‘loader‘,function(){ return{ restrict:‘AE‘, link:function(scope,element,attr){ element.bind(‘mouseenter‘,function(){ // scope.loadData(); // scope.$apply("loadData()"); scope.$apply(attr.loaddatafn); }) } }})
當然，在指令的 link方法中我們也做了改變，link方法呢，給我提供了四個參數:scope、element、attr和父控制器。我們給元素繫結事件也是通過參數中的 element.bind()完成的，我們也可以通過 attr 屬性擷取指令上的屬性，然後通過$apply的方法來完成調用就好了。在此要提交大家的是，我們在擷取指令元素上的屬性的時候，一定要注意，我們要把屬性的名字寫成小寫，這是angularJS的坑。
AngularJs-指令和控制器互動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
