javascript - AngularJS:如何实现全局错误处理程序并显示错误

Question

对于我的网页，我有几个 Angular 应用程序。对于那些应用程序，我想创建一个全局错误处理程序来跟踪代码为 500、401 等的错误并将它们显示为警报。

这是我到目前为止所拥有的:

我创建了一个全局错误处理程序模块，然后将其注入(inject)我的应用程序

angular.module('globalErrorHandlerModule', [])
    .factory('myHttpInterceptor', ['$rootScope', '$q', function ($rootScope, $q) {
        return {
            'responseError': function (rejection) {
                if(rejection.status == 500){
                    // show error
                }

                return $q.reject(rejection);
            }
        };
    }])
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push('myHttpInterceptor');
    });

angular.module('myApp', ['globalErrorHandlerModule'])

现在我正在努力解决的实际上是在警报中显示错误。最好的方法是什么？我尝试创建一个单独的错误应用程序并注入(inject)错误模块并在两者之间共享一个数据工厂，但数据永远不会在应用程序中更新。像这样的东西:

angular.module('globalErrorHandlerModule', [])
    .factory('myHttpInterceptor', ['$rootScope', '$q', 'Data', function ($rootScope, $q, Data) {
        return {
            'responseError': function (rejection) {
                if(rejection.status == 500){
                    // set error
                    Data.error.message = '500 error';
                }

                return $q.reject(rejection);
            }
        };
    }])
    .factory('Data', function () {
        var _error = {
            message: "init"
        };
        return {
            error: _error
        };
    })
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push('myHttpInterceptor');
    });

angular.module('globalErrorHandlerApp', ['globalErrorHandlerModule'])
    .controller('GlobalErrorCtrl', function ($scope, Data) {
        $scope.test = Data.error.message;
    });

然后显示错误如下:

<div ng-controller="GlobalErrorCtrl">
         Error {{test}}    
</div>

但如前所述，我只看到我的初始值，并没有更新错误消息。我也尝试过广播，但也没有用。我确信有更好的方法来实现这样的东西，我只是还没有找到它。感谢您为我指明正确方向的任何提示。

Answer 1

试试这个

angular.module('globalErrorHandlerApp', ['globalErrorHandlerModule'])
.controller('GlobalErrorCtrl', function ($scope, Data) {
    $scope.test = Data.error;
});

观察一个对象而不是一个字符串是一个更好的主意。
让我知道是否对您有帮助

<div ng-controller="GlobalErrorCtrl">
     Error <span> {{test.message}}   </span>  
</div>