Question

我正在使用ui-router作为我的SPA，但我遇到了各州的问题。我的州设置如下

$stateProvider.state('product', {
    url: '/product/:category/:product',
    templateUrl: 'src/app/product/product.tpl.html',
    controller: 'ProductCtrl'
});

但我遇到的问题是，当我去/ product / cat-one时，我的控制器会处理没有产品设置的事实，那么当我再次转到/ product / cat-one / product-one我的控制器时处理存在产品的事实，一切都运作良好。

我面临的问题是，如果我从/ product / cat-one / product-one转到/ product / cat-two：产品仍然存在且url最终成为/ product / cat-two / product-one

有人能指出我正确的方向吗？

这是我的控制器供参考：

.controller( 'ProductCtrl', function ( $scope, $stateParams, ProductService ) {
  $scope.categoryId  = $stateParams.category;
  $scope.productId   = $stateParams.product;
  $scope.isProduct   = false;

  if ($scope.productId) {
      $scope.isProduct = true;
      $scope.item = ProductService.getProduct($scope.categoryId);
  } else {
      $scope.item = ProductService.getCategory($scope.categoryId);
  }
})

提前致谢

Answer 1

看起来您应该按层次处理此路线设置：

$stateProvider
    .state('category', { url: '/product/:category', templateUrl: 'src/app/product/product.tpl.html', controller: 'ProductCtrl' })
    .state('category.product', { url: '/:product', templateUrl: 'src/app/product/product.tpl.html', controller: 'ProductCtrl' });

现在我不确定您的要求，但也可能有另一个父状态（'/ product'）抽象出类别和产品的重复使用功能。

好的，所以看起来要求是展示单个产品和单个类别。我建议你有机会阅读ui-router文档。要获得所需的功能，您应该为类别和产品使用单独的模板和控制器。

如果要完全用产品页面替换类别页面，那么状态不应该是分层的，但是如果它们借用了重用的功能，那么可以将两种类型的父状态设置为可以实现这种可重用性的类型（但我会更多可能在这里使用服务。）

因此得到的路线定义如下：

$stateProvider
    .state('category', { url: '/product/:category', templateUrl: 'src/app/product/category.tpl.html', controller: 'CategoryCtrl' })
    .state('product', { url: '/product/:category/:product', templateUrl: 'src/app/product/product.tpl.html', controller: 'ProductCtrl' });

请注意，您现在需要每种类型的模板和控制器。

角度ui-router stateParams持续存在

1 个答案: