我使用angular-ui-router的解决方案从服务器获取数据，在移动到一个状态。有时对服务器的请求失败，我需要通知用户有关失败。如果我从控制器调用服务器，我可以放置然后调用我的通知服务，以防止调用失败。我把调用的服务器解决，因为我想要后代状态等待服务器的结果，他们开始之前。
在调用服务器失败的情况下，在哪里可以捕获错误？ (我已经阅读documentation，但仍然不确定如何。此外，我正在寻找一个理由，尝试这个新的代码片段工具:)。
"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;
}]
},"data",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>
问题是如果路由解析中的任何依赖性被拒绝，则不会实例化控制器。因此，您可以将故障转换为可在实例化控制器中检测到的数据。
示例伪代码： –
data: ["$q","$http",$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",$state) {
//If it has Failed
if(!data.status){
$scope.error = "Some error";
return;
}
$scope.detailvm = {
state: $state.current.name,data: data
};
如果你正在进行$ http呼叫或类似的，你可以使用http promise来解决数据，即使在失败的情况下，并返回一个状态到控制器。
例：-
resolve: {
data: ["$q",$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',template: '<div>{{error}}</div><div>{{listvm}}</div>' +
'<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' +
'<ui-view />',$state){
$scope.listvm = { state: $state.current.name };
}]
})
.state("list.detail",$http) {
return $http.get("/").then(function(){ return {status:true,function(){ return {status:false} })
}]
},$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>