Javascript 使用angular ui路由器获取服务中的路由参数
使用Angular的默认路由器,您可以通过在路由中放置以下内容来解析AJAX资源:Javascript 使用angular ui路由器获取服务中的路由参数,javascript,angularjs,angular-ui-router,angular-services,Javascript,Angularjs,Angular Ui Router,Angular Services,使用Angular的默认路由器,您可以通过在路由中放置以下内容来解析AJAX资源: .when('/view/:recipeId', { controller: 'ViewCtrl', resolve: { recipe: ["RecipeLoader", function(RecipeLoader) { return RecipeLoader(); }] }, 以及实施这项服务: services.factory('Recipe
.when('/view/:recipeId', {
controller: 'ViewCtrl',
resolve: {
recipe: ["RecipeLoader", function(RecipeLoader) {
return RecipeLoader();
}]
},
以及实施这项服务:
services.factory('RecipeLoader', ['Recipe', '$route', '$q',
function(Recipe, $route, $q) {
return function() {
var delay = $q.defer();
Recipe.get({id: $route.current.params.recipeId}, function(recipe) {
delay.resolve(recipe);
}, function() {
delay.reject('Unable to fetch recipe ' + $route.current.params.recipeId);
});
return delay.promise;
};
}]);
我目前正在开发一款Ionic应用程序,并提供以下服务:
services.factory('AlbumLoader', ['Album', '$route','$q', function (Album, $state, $q) {
return function () {
var delay = $q.defer();
Album.get({id: $route.current.params.albumId}, function (album) {
delay.resolve(album);
}, function() {
delay.reject('Unable to fetch album');
});
return delay.promise;
}
}]);
及以下路线:
.state('app.album', {
cache: false,
url: "/albums/:albumId",
resolve: {
album: ['AlbumLoader', function (AlbumLoader) {
return AlbumLoader();
}]
},
views: {
'menuContent': {
templateUrl: "templates/album.html",
controller: 'AlbumCtrl'
}
}
})
爱奥尼亚使用的是角度用户界面路由器,关于这个问题的文档并不十分清楚。如何使用angular ui router
以与默认angular router相同的方式获取服务中的路由参数
编辑:这方面仍然存在一些问题。在加载程序中使用Chrome调试器,当URL为
#/app/albums/17ef729c-af5b-4724-9c69-9585ab542e99
时,$state.params是空对象。这将导致错误消息错误:[$resource:badcfg]在获取操作的资源配置中出错。预期响应包含一个对象,但得到了一个数组,因为相册ID没有通过。$state
的行为与$route类似。
只需将$route
更改为$state
,并且它不嵌套在$state.current.params
下即可使用$state.params
。或者您可以注入$stateParams.
services.factory('AlbumLoader', ['Album', '$state', '$q', function(Album, $state, $q) {
var delay = $q.defer();
Album.get({
id: $state.params.albumId
}, function(album) {
delay.resolve(album);
}, function() {
delay.reject('Unable to fetch album');
});
return delay.promise;
}]);
关于它的文档,要使用它:在您的状态配置中
.state("funnyState", {
url: "/xxx/:id",
templateUrl: "template.html",
controller: "funnyController",
resolve: {
thingINeed : function($stateParams, funnyService){
return funnyService.getReallyFunnyItem($stateParams.id);
}
}
})
在你的控制器里
angular.module("app.controllers").controller("funnyController", ["$state", "thingINeed", funnyController]);
function funnyController($state, thingINeed){
//thingIneed is resolved promise
//$state contains the id -> $state.params.id
}
至少我在当前项目中是这样做的。确定$state.current.params.albumId存在吗?我认为它是:$state.params.AlbumIDs,但在这个问题上遇到了一些麻烦-在加载程序中使用Chrome调试器,$state.params
是一个空对象。这将导致错误消息错误:[$resource:badcfg]操作的资源配置错误
get。预期响应包含一个对象,但得到一个数组
,因为没有传递相册ID。