使用 Angular ui-router 的嵌套状态

Question

我正在学习 Angular 并尝试设计一个具有嵌套状态的网站。首先我不确定我的解决方案是否正确！数据结构类似于下面的示例。我试图在我称之为 "showcase" 的一页中显示所有内容。在展示柜 (state:"showcase") 上，您将看到所有类别的列表，如果您单击例如 category1，则 category1 中的所有子类别将显示在同一页面但状态不同 (state:showcase.category1 ).这对于每个子类别也是一样的，所以如果你点击例如subcategory2 它应该显示 subcategory2 中的所有产品并将状态更改为 showcase/category1/subcategory2。我正在尝试将这一切都静态化，因此不会有服务器端。

我创建了一个小 Plunker，您可以在此处查看 --> http://plnkr.co/edit/AkuCJXev6NzmgbqBMUrn

对于我要实现的目标，这是一个很好的解决方案吗？如果不是，我应该如何重定向我的方法。

如果这是正确的方法，我如何在不同的状态下动态地操作 DOM（例如，链接的 ui-sref）

谢谢！

[ 
  {
    "title" : "category1",
    "url" : "category1",
    "imgUrl" : "http://lorempixel.com/200/200",
    "subCats" : [
        {
          "title" : "subCat1",
          "url" : "subCat1",
          "imgUrl" : "http://lorempixel.com/200/200",
          "products" : [
              {
                "title" : "product1",
                "imgUrl" : "http://lorempixel.com/200/200"
              },
              {
                "title" : "product2",
                "imgUrl" : "http://lorempixel.com/200/200"
              }
            ]
        },
        {
          "title" : "subCat2",
          "url" : "subCat2",
          "imgUrl" : "http://lorempixel.com/200/200",
          "products" : [
              {
                "title" : "product3",
                "imgUrl" : "http://lorempixel.com/200/200"
              },
              {
                "title" : "product4",
                "imgUrl" : "http://lorempixel.com/200/200"
              }
            ]
        }
      ]
  },
  {
    "title" : "category2",
    "url" : "category2",
    "imgUrl" : "http://lorempixel.com/200/200",
    "subCats" : [
        {
          "title" : "subCat3",
          "url" : "subCat3",
          "imgUrl" : "http://lorempixel.com/200/200",
          "products" : [
              {
                "title" : "product5",
                "imgUrl" : "http://lorempixel.com/200/200"
              },
              {
                "title" : "product6",
                "imgUrl" : "http://lorempixel.com/200/200"
              }
            ]
        },
        {
          "title" : "subCat4",
          "url" : "subCat4",
          "imgUrl" : "http://lorempixel.com/200/200",
          "products" : [
              {
                "title" : "product7",
                "imgUrl" : "http://lorempixel.com/200/200"
              },
              {
                "title" : "product8",
                "imgUrl" : "http://lorempixel.com/200/200"
              }
            ]
        }
      ]

  }
]

Answer 1

您的定义缺少的是视图嵌套 - 这意味着 $scope 继承。我更新了 your plunker and make it working.

我更改了您的模板，以便也为您的子状态提供目标（请参阅 <ul> 现在用 ui-视图包裹 - 子目标）

<h1>Showcase</h1>
<div ui-view="">
  <ul>
    <li class="text-center thumbnail list-inline" ng-repeat=" category in categories">
      <img src="{{category.imgUrl}}" alt="" />
      <a ui-sref="showcase.category({category: category.url})">{{category.title}}</a>
    </li>
  </ul>
</div>

这会将此内容替换为子内容。而且我们还将 $scope 继承 （阅读更多 here about sharing data among states）

这是更新后的状态定义：

.state('showcase', {
  url: "/",
  templateUrl: "pages/showcase.html"
})
.state('showcase.category', {
  url: "^/:category",
  templateUrl: "pages/subcategory.html",
  controller: 'categoryCtrl',
})
.state('showcase.category.subcategory', {
  url: "/:subcategory",
  templateUrl: "pages/product.html",
  controller: 'productCtrl',
});

以及新控制器：

.controller('categoryCtrl', ['$scope', '$stateParams',
    function($scope, $stateParams) {
      $scope.category = $stateParams.category;
      $scope.subCats = _.find($scope.categories, { "url": $stateParams.category }).subCats;
    }
  ])
.controller('productCtrl', ['$scope', '$stateParams',
    function($scope, $stateParams) {
      $scope.subcategory = $stateParams.subcategory;
      $scope.products = _.find($scope.subCats, { "url": $stateParams.subcategory}).products;
    }
  ])

检查更新的 plunker here

同时检查这些：

How do I share $scope data between states in angularjs ui-router?
multiple ui-view html files in ui-router

使用 Angular ui-router 的嵌套状态

nested states using Angular ui-router

angularjs

angular-ui-router