angular中控制器、服務(wù)和指令的關(guān)系是什么

今天就跟大家聊聊有關(guān)angular中控制器、服務(wù)和指令的關(guān)系是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

從總體來(lái)看，這三個(gè)組件的關(guān)系如下所示：

• 服務(wù)負(fù)責(zé)從遠(yuǎn)端服務(wù)器抓取和存儲(chǔ)數(shù)據(jù)。

• 基于服務(wù)構(gòu)建的控制器將為angular的作用域?qū)哟翁峁?shù)據(jù)和功能。

• 基于服務(wù)和控制器構(gòu)建的指令將直接與文檔對(duì)象模型（DOM）元素進(jìn)行交互。

因?yàn)榭刂破鞑⑽词褂靡蕾囎⑷肫鬟M(jìn)行注冊(cè)，所以控制器和服務(wù)無(wú)法將控制器列為依賴。

<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) {
    //錯(cuò)誤：使用控制器注冊(cè)
});
 
m.factory('myService2', function(MyController) {
    //錯(cuò)誤：使用控制器注冊(cè)
});

每個(gè)ng-controller都會(huì)實(shí)例化一次，而服務(wù)只會(huì)實(shí)例化一次，即服務(wù)是單例的。

控制器可以將本地對(duì)象列為依賴，如$scope，但是服務(wù)無(wú)法將本地對(duì)象列為依賴。

m.factory('myService', function($scope) {
    //錯(cuò)誤：$scope未使用依賴注入器進(jìn)行注冊(cè)
});

這就是為什么在angular中是控制器把javaScript數(shù)據(jù)和函數(shù)公開(kāi)給HTMl而不是服務(wù)的原因：控制器可以訪問(wèn)$scope。

指令可以有一個(gè)相關(guān)聯(lián)的控制器，可以把服務(wù)列為依賴。但是控制器和服務(wù)無(wú)法將指令列為依賴。

angular.module('stockDogApp')
  .directive('stockTable', function() {
  	return {
  		template: 'Views/templates/stock-table.html',
  		restrict: 'E',
  		scope: {
  			watchlist: '='
  		},
  		controller: function ($scope) {
  			//...
  		}
  	}
  });

指令還可以有一個(gè)require屬性，用于保證指令的作用域必須總是另一指令作用域的子孫。

angular.module('stockDogApp')
  .directive('stockRow', function($timeout, QuoteService) {
  	return {
  		restrict: 'A',
  		require: '^stockTable' //stockTable指令，^表示在父作用域中尋找
  		scope: {
  			stock: '=',
  			isLast: '='
  		},
  		link: function ($scope, $element, $attrs, stockTableCtrl) {
  			//..
  		}	
  	}
  });

指令選項(xiàng)require要求stockRow指令的作用域必須是stockTable指令的作用域的子孫，而且可以訪問(wèn)被實(shí)例化的stockTable指令的控制器，它是link函數(shù)的第4個(gè)參數(shù)。如果兩個(gè)指令需要一起使用，那么require指令選項(xiàng)是完成這個(gè)工作的正確工具。

看完上述內(nèi)容，你們對(duì)angular中控制器、服務(wù)和指令的關(guān)系是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。