Question

当restangular无法加载数据时，我一直在努力寻找更好的解决方案来显示错误消息。它很简单，显示一个警告框，但我在整个网站使用toastr消息。将toastr依赖项注入app.config并不起作用。

显示针对badd http请求的toastr警报的最佳方法是什么？

这是我的路由器：

configAppControllers.config(['$stateProvider', '$urlRouterProvider', 'RestangularProvider',
    function ($stateProvider, $urlRouterProvider, RestangularProvider) {

        RestangularProvider.setErrorInterceptor(function (response) {

            if (response.status == 401) {
                alert('Oops, looks like something went wrong here.\nPlease try your request again later.\n\nError Code: ' + response.status);
                //toastr.error('There has been an error contacting the server, please try again' + response.status);
            } else if (response.status == 400) {
                alert('Oops, looks like something went wrong here.\nPlease try your request again later.\n\nError Code: ' + response.status);
            } else {
                alert("Response received with HTTP error code: " + response.status );
            }
            return false;
        });

        // default route
        $urlRouterProvider.otherwise("/cas");
        $urlRouterProvider.when('/programhome/:programId', '/programhome/:programId/home');
        // ui router states for dashboard views
        //$urlRouterProvider.when('/');
        $stateProvider
            .state('cas', {
                url: "/cas",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerViewRight.html'
                    },
                    content: {
                        templateUrl: 'components/dashboard/intros/welcome.html'
                    }
                }
            })
            .state('app', {
                url: "/app/:casId",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerLogoViewRight.html'
                    },
                    content: {
                        templateUrl: 'components/dashboard/intros/application.html'

                    }
                }
            })
            .state('org', {
                url: "/org",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerLogoViewRight.html'
                    },
                    content: {
                        templateUrl: 'components/dashboard/intros/organizations.html'
                    }
                }
            })
            .state('programslist', {
                url: "/programs/:orgId",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerIconsOrgs.html',
                        controller: 'headerIconsOrgsController as headerOrgCtrl'
                    },
                    content: {
                        templateUrl: 'components/dashboard/programDetails/programs.html'
                    }
                }
            })

    }]).run(['$rootScope', '$timeout', '$location', '$state', 'toastr','$anchorScroll',
    function ($rootScope, $timeout, $location, $state, toastr, $anchorScroll) {
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            console.log('event was:', toState);
        });
        $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams) {
            console.log('event was:', event);
        });
        $rootScope.$on('$stateChangeSuccess', function() {
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        });
        $timeout(function () {
            $('.sidebar').css({
                'height': $('.main-page').css('height')
            });
            $('.mv-sidebar').css({
                'height': $('.main-page').css('height')
            });
        }, 200);
    }]);

Answer 1

解决方案是在路由器配置功能中添加一个运行功能，这样就完美了：

app.run(['$rootScope', '$timeout', '$location', '$state', 'toastr','$anchorScroll','Restangular',
    function ($rootScope, $timeout, $location, $state, toastr, $anchorScroll, Restangular) {

        Restangular.setErrorInterceptor(function (response) {

            if (response.status == 401) {
                toastr.error('Oops, looks like something went wrong here.<br>Please try your request again later.<br><br>Error Code: ' + response.status,'ERROR!!', {
                    allowHtml: true,
                    progressBar: true,
                    closeButton: true
                });

            } else if (response.status == 400) {
                toastr.error('Oops, looks like something went wrong here.<br>Please try your request again later.<br><br>Error Code: ' + response.status,'ERROR!!', {
                    allowHtml: true,
                    progressBar: true,
                    closeButton: true
                });

            } else {
                toastr.error("Response received with HTTP error code: " + response.status,'ERROR!!', {
                    allowHtml: true,
                    progressBar: true,
                    closeButton: true
                });

            }
            return false;
        });

    }]);

使用restangular和angular ui-router添加toastr警报消息

1 个答案: