指令不更新（重新渲染）数据更改答案

【问题标题】：Directive not updateing (re-render) with data change指令不更新（重新渲染）数据更改
【发布时间】：2014-09-15 08:23:38
【问题描述】：

当保存数据的提供程序更新时，我无法更新我的 angularJS 模块。
console.logs 正在写出，但 html 没有更新。

指令：

.directive('logBar', ['loggingService', function(loggingService) {
        var template = '<div class="floatLeft" ><div class="arrow"></div></div>' +
                '<ul class="floatLeft">' +
                '<li class="logHolder" tabindex="-1" ng-repeat="log in logs | reverse">' +
                '<label class="label label-{{log.type}}" ng-click="alert(log.message);" tabindex="-1">{{log.date | date:"HH:mm, dd.MMM" }} -  {{log.message}}</label>' +
                '</li>' +
                '</ul>';
        return {
            restrict: 'E',
            template: template,
            scope: {},
            link: function($scope, $elem, $attrs) {
                $scope.$watch(function() {
                    console.log("logs updating");
                    $scope.logs = loggingService.getLogs();
                    console.log($scope.logs);
                });

           }
    };
}]);

提供者：

provider('loggingService', function() {
    var logs = [{"date": Date.now(), "origin": "Logbar", "message": "Welcome", "type": "info"}];

    var maxLogs = 15;
    var types = "default,primary,success,info,warning,danger";
    this.resetLog = function() {
        logs = [];
    };
    this.Removelog = function(message, type, alert) {

    };
    this.$get = function() {
        return {
            logs: logs,
            getLogs: function() {
                return logs;
            },
            log: function(message, type, alert) {
                if (types.indexOf(type) === -1) {
                    if (type !== "error") {
                        type = "default";
                    } else {
                        type = "danger";
                    }
                }
                logs.push({"message": message, "type": type, "date": Date.now(), origin: "User"});
                if (logs.length > maxLogs) {
                    logs.shift();
                }
            }
        };
    };
})

控制器：

适用于应用，但没有它们，它不会。无论如何将 $apply 插入提供程序，这样我就不必到处写它们了吗？

$http.post("/competition/" + $scope.key, angular.toJson($scope.draws)).success(function(data) {
            $scope.fixDraws();
            loggingService.log("Saved", "success", false);
            $scope.$apply();
        }).error(function(data) {
            loggingService.log("Error", "danger", true);
            $scope.fixDraws();
            $scope.$apply();
        });

【问题讨论】：

发布getLogs 代码。我认为问题在于您如何加载数据。
使用 getLogs 添加了提供者 :-)
@dfsq 现在在这里 :-)
我无法使用简化的code 复制该问题。如果您可以设置一个失败的演示，那将有所帮助。
我也刚刚尝试像您的示例 here 那样进行设置，效果很好..

标签： angularjs angularjs-directive

【解决方案1】：

根据我的阅读，您正在尝试从 watchExpression 更新您的范围，而不是从 $watch listener。

试试这个：

        link: function($scope, $elem, $attrs) {
            $scope.$watch(
                // watch expression
                function() {
                    return loggingService.getLogs();
                },
                // listener
                function(newVal){
                    $scope.logs = newVal;
                }
            );

       }

请参阅docs。

【讨论】：

不，这不是问题。唯一重要的部分是$scope.logs = loggingService.getLogs();，无论如何都会执行。
dfsq：你的意思是说既然 watch 表达式总是在监听器之前调用，那么虽然这里的书没有完全使用它，但它仍然可以工作？
我是说手表在这里根本不是重要的部分。见plnkr.co/edit/t2DUUIHUNqk1sxiYnAqr?p=preview
在我看来，原始代码并没有以正确的方式使用 $watch，但我明白你的意思。在这种情况下，这不是问题。
是的，@dfsq 是对的，这是一个原始实现工作正常的 plunk：plnkr.co/edit/wtOg2ZhCGAjd1uhKXrHR?p=preview

【解决方案2】：

已通过在 http 调用中添加 $apply 来解决此问题。而且我无法在另一个项目中重现该错误。

【讨论】：