Question

当保持数据更新的提供商更新时，我无法更新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();
        });

Answer 1

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

试试这个：

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

       }

请参阅docs。

Answer 2

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

指令不随数据更改而更新（重新呈现）

2 个答案: