Question

使用Angular的默认路由器，你可以通过在路由中添加这样的东西来解析AJAX资源：

.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'
      } 
    } 
  })

Ionic使用angular-ui-router，并且在此问题上的文档并不完全清楚。如何使用angular-ui-router以与默认Angular路由器相同的方式在服务中获取路由参数？

编辑：仍有一些问题。使用加载器内的Chrome调试器，当URL为#/app/albums/17ef729c-af5b-4724-9c69-9585ab542e99时，$ state.params为空对象。这会导致错误消息Error: [$resource:badcfg] Error in resource configuration for action get. Expected response to contain an object but got an array，因为相册ID未通过。

Answer 1

$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; }]);

[65 Batch Process Data].[Batch Number].&[Batch Number]&[Plant Code]&[Production Unit]

关于$stateParams，jsbin的文档，可以使用它：

Answer 2

这在您的州配置

中

.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
}

至少这就是我在当前项目中的表现。

使用angular-ui-router获取服务中的路由参数

2 个答案: