Javascript 使用拦截器处理角度错误的一般方法

我使用的是Angular 1.08，因此我需要使用

响应interceptors

首先是代码

口译员：

app.factory('errorInterceptor', ['$q', 'NotificationService', function ($q, NotificationService) {
    return function (promise) {
        return promise.then(function (response) {
            // do something on success
            return response;
        }, function (response) {
            // do something on error
            alert('whoops.. error');
            NotificationService.setError("Error occured!");

            return $q.reject(response);
        });
    }
}]);

app.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('errorInterceptor');
});

通知服务：

app.service("NotificationService", function () {
    var error = '';

    this.setError = function (value) {
        error = value;
    }

    this.getError = function () {
        return error;
    }

    this.hasError = function () {
        return error.length > 0;
    }
});

指令错误框：

app.directive("errorBox", function (NotificationService) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div data-ng-show="hasError">{{ errorMessage }}</div>',
        link: function (scope) {
            scope.$watch(NotificationService.getError, function (newVal, oldVal) {
                if (newVal != oldVal) {
                    scope.errorMessage = newVal;
                    scope.hasError = NotificationService.hasError();
                }
            });

        }
    }
});

app.directive（“errorBox”，函数（NotificationService）{
返回{
限制：'E'，
替换：正确，
模板：{{errorMessage}}}，
链接：功能（范围）{
作用域.$watch（NotificationService.getError，函数（newVal，oldVal）{
如果（newVal！=oldVal）{
scope.errorMessage=newVal；
scope.hasError=NotificationService.hasError（）；
}
});
}
}
});

问题是：当我在多个地方使用

时，所有这些框都会显示错误消息。这不是我的意图。我只想显示发生异常的错误框

例如，我有一个显示事务列表的指令。当获取事务失败时，我想显示该部分声明的错误框。 我还有一个可以编辑客户的指令。此指令还包含错误框标记

当保存客户失败时，将显示两个错误框，但是，我只希望显示客户的错误框

---

有人有想法实现这一点吗？

Angular服务是单例对象，如Angular文档中所述。这意味着Angular只创建一个服务的“全局”实例，并在请求给定服务时使用该实例。这意味着Angular只创建了

NotificationService

服务的一个实例，然后将该实例提供给

errorBox

指令的每个实例。因此，如果有一条指令更新了

通知服务

的错误值，那么所有

都将感谢您的详细回答。这无疑给了我一些思考的东西。
app.factory('errorInterceptor', ['$q', '$rootScope', function ($q, $rootScope) {
    return function (promise) {
        return promise.then(function (response) {
            // do something on success
            return response;
        }, function (response) {
            // do something on error
            alert('whoops.. error');
            var errorType = ...; // do something to determine the type of error
            switch(errorType){
                case 'TransactionError':
                    $rootScope.$emit('transaction-error', 'An error occurred!');
                    break;
                case 'CustomerError':
                    $rootScope.$emit('customer-error', 'An error occurred!');
                    break;
                ...
            }

            return $q.reject(response);
        });
    }
}]);

link: function (scope, element, attrs) {
        var typeOfError = attrs.errorType;
        scope.$on(typeOfError, function (newVal, oldVal) {
            if (newVal != oldVal) {
                scope.errorMessage = newVal;
            }
        });

    }

<error-box error-type="transaction-error"></error-box>
<error-box error-type="customer-error"></error-box>