1. 程式人生 > >angular控制器、服務和指令三者之間的關係

angular控制器、服務和指令三者之間的關係

從總體來看,這三個元件的關係如下所示:

  • 服務負責從遠端伺服器抓取和儲存資料。
  • 基於服務構建的控制器將為angular的作用域層次提供資料和功能。
  • 基於服務和控制器構建的指令將直接與文件物件模型(DOM)元素進行互動。
因為控制器並未使用依賴注入器進行註冊,所以控制器和服務無法將控制器列為依賴。
<div ng-controller="MyController"></div>
var m = angular.module('myModule');

m.factory('myService', function() {
    return { answer: 42 };
});

m.controller('MyController', function(myService) {
    //使用myService
});

m.controller('MyController2', function(MyController) {
    //錯誤:使用控制器註冊
});

m.factory('myService2', function(MyController) {
    //錯誤:使用控制器註冊
});
每個ng-controller都會例項化一次,而服務只會例項化一次,即服務是單例的。 控制器可以將本地物件列為依賴,如$scope,但是服務無法將本地物件列為依賴。
m.factory('myService', function($scope) {
    //錯誤:$scope未使用依賴注入器進行註冊
});
這就是為什麼在angular中是控制器把javaScript資料和函式公開給HTMl而不是服務的原因:控制器可以訪問$scope。
指令可以有一個相關聯的控制器,可以把服務列為依賴。但是控制器和服務無法將指令列為依賴。
angular.module('stockDogApp')
  .directive('stockTable', function() {
  	return {
  		template: 'Views/templates/stock-table.html',
  		restrict: 'E',
  		scope: {
  			watchlist: '='
  		},
  		controller: function ($scope) {
  			//...
  		}
  	}
  });
指令還可以有一個require屬性,用於保證指令的作用域必須總是另一指令作用域的子孫。
angular.module('stockDogApp')
  .directive('stockRow', function($timeout, QuoteService) {
  	return {
  		restrict: 'A',
  		require: '^stockTable' //stockTable指令,^表示在父作用域中尋找
  		scope: {
  			stock: '=',
  			isLast: '='
  		},
  		link: function ($scope, $element, $attrs, stockTableCtrl) {
  			//..
  		}	
  	}
  });
指令選項require要求stockRow指令的作用域必須是stockTable指令的作用域的子孫,而且可以訪問被例項化的stockTable指令的控制器,它是link函式的第4個引數。如果兩個指令需要一起使用,那麼require指令選項是完成這個工作的正確工具。 注:參考《自AngularJS高階程式設計》,僅當備忘錄吧。