Question

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

我创建了一个你可以在这里查看的Plunker - ＆gt; 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-view包装 - 儿童目标）

<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）

这是更新状态def：

.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

同时检查以下内容：

使用Angular ui-router的嵌套状态

1 个答案: