Question

查看下面提供的代码示例。

单击粗体hello文本。如您所见，范围已从工厂更新，scope.myFactory.str将附加到指令。但是，观点不是。我试图使用scope.apply（）来更新视图，但它无法正常工作。所以我希望大胆的文字能够更新。请注意，工厂的数据可以在任何地方进行更改，因此我无法在点击事件上调用范围。$ apply（）。

＆＃13;

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);
            });
        }
    };
}])

＆＃13;

<html ng-app='myModule'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<mydir></mydir>

＆＃13;

Answer 1

此处的问题是您正在更改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>

AngularJS视图未从与工厂关联的范围更新

1 个答案: