Question

我有一个从工厂获取数据的指令。当第一次加载时，它工作正常。但是后来，当工厂数据发生变化时，指令不会对此更改作出反应。我该如何解决？

appWD.directive('widgetName', ['WidgetData', function(WidgetData) {
    return {
        restrict: 'E',
        templateUrl: '_widget.html',
        link: function(scope, elem, attrs) {
            scope.data = WidgetData.GetWidgetData('widgetName');
            //both do not work
            //scope.$watch(scope.data);
            //scope.$watch(WidgetData.GetWidgetData('widgetName'));
        }
    };
}]);

GetWidgetData（'widgetName'）返回对象。

codepen示例：http://codepen.io/anon/pen/xwLLxM?editors=101

Answer 1

尝试使用

scope.$watchCollection(function(){return WidgetData.getWidgetData('widget');}, function() {
    alert('scope.$watchCollection');
 });

$ watchCollection“浅看对象的属性，并在任何属性发生变化时触发”AngularJs Docs

我创建了一个小应用来复制你的问题。这是Demo

Answer 2

setTimeout(function(){
    $scope.$apply()
},0);

在数据更新后把这个，这个vl更新UI 可以工作

注入工厂更改数据时的angular：update指令

2 个答案: