Question

我有这个角度指令：

app.directive("apiError", function() {
    return {
        require: "apiUrls",
        template: '{{errors.length}}',
        controller: ["$scope", "$attrs", "ApiError", function($scope, $attrs, ApiError) {
            $scope.errors = ApiError.errors;
        }]
    }
});

在这样的代码中使用：

<div api-error api-urls="['api/login']"></div>

ApiError是一种服务，它包含来自服务器端的所有错误。它肯定是人口稠密的。

如果我更改$ scope.errors = ApiError.errors; to $ scope.errors = [“blah”];然后页面显示1，所以（我认为）这不是命名问题。

编辑：请求发布ApiError的来源：

app.service("ApiError", [function () {
    this.errors = [];

    this.setError = function(apiUrl, apiMethod, apiResponseData) {
        this.errors[apiUrl] = this.errors[apiUrl] || [];
        this.errors[apiUrl][apiMethod] = apiResponseData;
    };

    this.removeError = function(apiUrl, apiMethod) {
        if(this.errors[apiUrl] && this.errors[apiUrl][apiMethod]) {
            delete this.errors[apiUrl][apiMethod];
        }

        if(this.errors[apiUrl] && this.errors[apiUrl].length === 0) {
            delete this.errors[apiUrl];
        }
    };
}]);

Answer 1

看起来你ApiError.errors实际上是一个用错误的url键入的Object，而不是一个数组。因此它没有.length方法。但是，您可以获取该对象的键数：Object.keys(ApiError.errors).length

Answer 2

您没有在侦听（或观察）服务的错误数组中的更改。因此，当代码运行时，errors数组为空，如果稍后填充，它将不会反映在您的指令中。

controller: ["$scope", "$attrs", "ApiError", function($scope, $attrs, ApiError) {
        $scope.$watch(function(){return ApiError.errors;}, function(errors){
          $scope.errors = errors;
      });
 }]

为什么这个角度指令不会更新

2 个答案: