Question

我是角度ui路由器的新手，我正在尝试使用一个抽象状态，它具有与子状态共享的公共模板，以及具有自己的模板和控制器的子状态。

angular.module('app').config(['$stateProvider',
        function($stateProvider) {
            $stateProvider
            .state('catalog', {
              abstract:true,
              url: '/catalog',
              views: {
               "":{
                templateUrl: 'modules/catalog/views/catalog.client.view.html',
               },
               "productAdd@catalog": {
                 templateUrl: 'modules/catalog/views/catalog.product_add.client.view.html',
                 controller: 'ProductAddController'
               },
               "productList@catalog": {
                 templateUrl: 'modules/catalog/views/catalog.productList.client.view.html',
                 controller: 'ProductListController'
               }
              }
            })
            .state('catalog.base', {

            })
            .state('catalog.productDetail', {
             params: {
               productId: "no_code"
             },
             templateUrl: 'modules/catalog/views/catalog.productDetail.client.view.html',
             controller: 'ProductDetailController'
            });
        }

]）;

要登陆此模块，我将这个简单的锚点放在导航栏上：

<a ui-sref="catalog.base">go</a>

这种导航有效，但我想知道是否有更清晰的方法来编写此导航，避免“空”状态 “catalog.base”但保持包含公共命名视图和无效视图的抽象状态的结构。\

这里是“catalog.client.view.html”：

<div class="new-row">
    <div class="product-add-col">
        <div ui-view="productAdd"></div>
    </div>
</div>
<div class="new-row">
    <div class="product-list-col">
      <div ui-view="productList"></div>
    </div>
    <div ui-view></div>
</div>

Answer 1

你不能仅仅将其命名为catalog而不是catalog.base，并使其不是抽象吗？

然后catalog.productDetail会激活catalog。文档明确表示我们在这里谈论继承{/ 3}：

子状态DO从父状态继承以下内容：


通过解决方案解决了依赖关系

自定义数据属性不继承任何其他内容（没有控制器，模板，网址等）。

Point是一个状态，不必是抽象的，以拥有激活它的子状态。这就是文档not：

抽象状态可以具有子状态但无法激活本身。一个＆＃39;摘要＆＃39;国家只是一个不可能的国家过渡到。

Angular UI路由器 - 具有命名模板最佳实践的抽象状态

1 个答案: