簡體   English   中英

AngularJS視圖未從綁定到工廠的范圍更新

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM