如何处理angular-ui-router解决scheme中的错误

我正在使用angular-ui-router的resolve ，在移到状态之前从服务器获取数据。 有时对服务器的请求失败，我需要通知用户有关失败。 如果我从控制器调用服务器，那么我可以把呼叫我的通知服务，在呼叫失败的情况下。 我打电话给服务器resolve因为我希望后代状态等待来自服务器的结果，才开始。

哪里可以捕捉错误的情况下，呼叫服务器失败？ （我已阅读文档，但仍不确定如何。此外，我正在寻找一个理由来尝试这个新的片段工具:)。

 "use strict"; angular.module('MyApp', ["ui.router"]).config([ "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/item"); $stateProvider .state("list", { url: "/item", template: '<div>{{listvm}}</div>' + '<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' + '<ui-view />', controller: ["$scope", "$state", function($scope, $state){ $scope.listvm = { state: $state.current.name }; }] }) .state("list.detail", { url: "/{id}", template: '<div>{{detailvm}}</div>', resolve: { data: ["$q", "$timeout", function ($q, $timeout) { var deferred = $q.defer(); $timeout(function () { //deferred.resolve("successful"); deferred.reject("fail"); // resolve fails here }, 2000); return deferred.promise; }] }, controller: ["$scope", "data", "$state", function ($scope, data, $state) { $scope.detailvm = { state: $state.current.name, data: data }; }] }); } ]); 

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script> <div ng-app="MyApp"> <ui-view /> </div> 

Answer 1

问题是，如果路由parsing中的任何依赖关系被拒绝 ，控制器将不会被实例化。 因此，您可以将故障转换为可在实例化控制器中检测到的数据。

示例伪代码： –

  data: ["$q", "$timeout","$http", function ($q, $timeout, $http) { return $timeout(function () { //timeout already returns a promise //return "Yes"; //return success of failure return success ? {status:true, data:data} : {status:false}; //return a status from here }, 2000); }] 

并在你的控制器中：

  controller: ["$scope", "data", "$state", function ($scope, data, $state) { //If it has failed if(!data.status){ $scope.error = "Some error"; return; } $scope.detailvm = { state: $state.current.name, data: data }; 

如果您正在进行$http调用或类似的操作，那么即使在发生故障的情况下，也可以使用http promise来parsing数据，并将状态返回给控制器。

例：-

 resolve: { data: ["$q", "$timeout","$http", function ($q, $timeout, $http) { return $http.get("someurl") .then(function(){ return {status:true , data: "Yes"} }, function(){ return {status:false} }); //In case of failure catch it and return a valid data inorder for the controller to get instantated }] }, 

 "use strict"; angular.module('MyApp', ["ui.router"]).config([ "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/item"); $stateProvider .state("list", { url: "/item", template: '<div>{{error}}</div><div>{{listvm}}</div>' + '<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' + '<ui-view />', controller: ["$scope", "$state", function($scope, $state){ $scope.listvm = { state: $state.current.name }; }] }) .state("list.detail", { url: "/{id}", template: '<div>{{detailvm}}</div>', resolve: { data: ["$q", "$timeout","$http", function ($q, $timeout, $http) { return $http.get("/").then(function(){ return {status:true , data: "Yes"} }, function(){ return {status:false} }) }] }, controller: ["$scope", "data", "$state", function ($scope, data, $state) { $scope.detailvm = { state: $state.current.name, data: data.status ? data :"OOPS Error" }; }] }); } ]); 

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> <div ng-app="MyApp"> <ui-view></ui-view> </div> 

Answer 2

老问题，但我有同样的问题，并在ui路由器的常见问题部分偶然发现

如果你遇到的问题是一个微不足道的错误没有被捕获，因为它发生在一个状态的parsing函数中，这实际上是每个规范的承诺的预期行为。

在解决的错误 。

所以你可以像这样在应用的运行阶段捕获所有的解决错误

 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ // this is required if you want to prevent the $UrlRouter reverting the URL to the previous valid location event.preventDefault(); ... })