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

青灯夜游
發布: 2021-05-13 10:59:25
轉載
2541 人瀏覽過

本篇文章為大家介紹一下angular控制器、服務與指令三者之間的關係。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

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

【相關推薦:《angular教學》】

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

  • 服務負責從遠端伺服器抓取和儲存資料。
  • 基於服務建構的控制器將為angular的作用域層次提供資料和功能。
  • 基於服務和控制器建立的指令將直接與文件物件模型(DOM)元素互動。

因為控制器並未使用依賴注入器註冊,所以控制器和服務無法將控制器列為依賴。

登入後複製
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中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!