淺談angular中控制器、服務與指令的關係

本篇文章為大家介紹一下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高級編程》，僅當備忘錄吧。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是淺談angular中控制器、服務與指令的關係的詳細內容。更多資訊請關注PHP中文網其他相關文章！