2

我正在使用 Angular 1.08，因此我需要使用responseInterceptors.

首先是代码。

口译员：

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();
                }
            });

        }
    }
});

问题：当我<error-box>在多个地方使用时，所有这些框都会显示错误消息。这不是我的意图。我只想显示发生异常的错误框。

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

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

有人有实现这个的想法吗？

4

1 回答 1

3

Angular 服务是 Singleton 对象，如 Angular 文档中所述。这意味着 Angular 只创建一个服务的“全局”实例，并在请求给定服务时使用同一个实例。这意味着 Angular 只创建一个服务实例，然后将这个实例提供给指令NotificationService的每个实例。errorBox因此，如果一个指令更新NotificationService' 的错误值，那么所有<error-box指令都将获得该值。

因此，您将不得不为每种类型的错误（即TransactionNotificationandCustomerNotification等）创建多个通知服务，或者向您的 main 添加不同的方法NotificationService，以允许您仅设置特定的警报（例如NotificationService.setCustomerError()or NotificationService.setTransactionError()）。

这些选项都不是特别用户友好或干净的，但我相信（考虑到您设置服务的方式），这是唯一的方法。

更新：在考虑之后，我可能会建议您放弃整个NotificationService班级，并在发生错误时使用$scope事件来通知您的元素：<error-box>

在你的'errorInterceptor'：

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);
        });
    }
}]);

然后在你的errorBox指令中：

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>

那有意义吗？

于 2013-10-18T16:06:41.450 回答