Question

我有一个存储数组的工厂，按下按钮时按下对象。我想将页面上的变量绑定到此数组中的第一个对象。这是我的工厂：

angular.module('myApp')
.factory('errorHandler', function () {
    var errorArray = [];
    function compareObjs(a,b) {
        if(a.type === "Alert" && b.type === "Info") {
            return -1;
        }
        else if (a.type === "Info" && b.type === "Alert") {
            return 1;
        }
        else {
            if(a.timestamp > b.timestamp) {
                return -1;
            }
            else if (a.timestamp < b.timestamp) {
                return 1;
            }
            else {
                return 0;
            }
        }
    }
    errorArray.addError = (function (type, message) {
        var timestamp = Date.now();
        errorArray.push({type: type, message: message, timestamp: timestamp});
        errorArray.sort(compareObjs);
    });
    errorArray.removeError = (function (index) {
        if(errorArray.length >= index) {
            errorArray.splice(index, 1);
        }
    });
    return errorArray;
})

和控制器：

.controller('ErrorModalCtrl', ['errorHandler', '$scope', function (errorHandler, $scope) {
    $scope.errorModal = {
        title: 'Notification Centre',
        errorList: []
    };
    $scope.addError = function(type, message) {
        errorHandler.addError(type, message);
        console.log(errorHandler.length+"just added");
    };
    $scope.errorModal.errorList = errorHandler;
    $scope.mostRecentError = errorHandler[0];
}]);

因此，当页面加载时，数组将为空，但是当我按下这些按钮时，会触发$scope.addError并将对象推送到数组。我已经检查过这是否正常工作。但是，在我的HTML上（在控制器的范围内），我有

{{mostRecentError.message}}

这永远不会填充。为什么会这样？我是否误解了某处的依赖关系？

由于

Answer 1

该行

$scope.mostRecentError = errorHandler[0];

在实例化控制器时执行

。那时，错误还没有按任何按钮。因此errorHandler[0]未定义，$scope.mostRecentError因此被初始化为undefined。

当用户按下按钮时，errorHandler会有第一个元素，但是这行代码不会被神奇地重新执行，因此$scope.mostRecentError将保持未定义。

您应该在控制器中定义一个返回最新错误的函数，而不是初始化变量。那个，或$scope.mostRecentError必须在控制器的addError()函数内初始化，每次添加错误时都要更新。

尝试将变量绑定到Factory数组中的行（角度）

1 个答案: