AngularJS：如何实现全局错误处理程序并显示错误答案

【问题标题】：AngularJS: How to implement global error handler and show errorsAngularJS：如何实现全局错误处理程序并显示错误
【发布时间】：2015-02-04 08:04:42
【问题描述】：

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

这是我目前所拥有的：

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

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'])

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

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>

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

【问题讨论】：

标签： javascript angularjs error-handling

【解决方案1】：

试试这个

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

观察对象比观察字符串更好。如果对你有帮助，请告诉我

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

【讨论】：