[英]AngularJS view not updated from scope tied to factory
看一下下面提供的代碼示例。
單擊粗體的問候文本。 如您所見,范圍是從工廠更新的,scope.myFactory.str附加到指令。 但是,視圖不是。 我正在嘗試使用scope.apply()更新視圖,但是它不起作用。 因此,我期望粗體文本會更新。 請注意,工廠的數據可以在任何地方更改,因此我不能簡單地在click事件上調用scope。$ apply()。
angular.module('myModule', []) .factory('myFactory', function($http, $window){ return { str:'hello' }; }) .directive('mydir', ['$timeout', 'myFactory', function ($timeout, myFactory) { return { restrict: 'E', scope: {}, template:'<div><b>{{myf.str}}</b>', link: function (scope, elem, attrs, ctrl) { scope.myf = myFactory; scope.$watch('scope.myf', function(n, o) { scope.$apply(); }); elem.bind('click', function(){ myFactory.str += '1'; elem.append(scope.myf.str); }); } }; }])
<html ng-app='myModule'> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <mydir></mydir>
這里的問題是您要在click
事件中更改范圍,但是該處理程序不會自動應用范圍更改。 將scope.$apply()
移至單擊處理程序即可達到目的。 您還必須擺脫scope.$watch
在這種情況下是多余的,並且將導致摘要錯誤或無限循環。
我還刪除了elem.append
以便您可以更清晰地看到更改范圍的效果。
angular.module('myModule', []) .factory('myFactory', function($http, $window){ return { str:'hello' }; }) .directive('mydir', ['$timeout', 'myFactory', function ($timeout, myFactory) { return { restrict: 'E', scope: {}, template:'<div><b>{{myf.str}}</b>', link: function (scope, elem, attrs, ctrl) { scope.myf = myFactory; elem.bind('click', function(){ myFactory.str += '1'; scope.$apply(); }); } }; }])
<html ng-app='myModule'> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <mydir></mydir>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.