AngularJS View 未使用 angular-ui-router 在第三级嵌套路由上更新答案

【问题标题】：AngularJS View not updating on third level nested route with angular-ui-routerAngularJS View 未使用 angular-ui-router 在第三级嵌套路由上更新
【发布时间】：2016-02-02 21:42:05
【问题描述】：

我正在尝试使用 ui-router 将路由嵌套三层。

我将只包括导致问题的路线的和平，因为我的路线有点大，不想在这里包括所有内容。读起来可能会很痛苦。但如果您认为我应该包含更多内容，请告诉我。

app.js

.state('elements', {
      url: '/elements',
      views: {
        nav: {
          templateUrl: 'components/directives/main-nav.html'
        },
        content: {
          templateUrl: 'views/main-nav/elements.html'
        },
        localFooter: {
          templateUrl: 'views/footer/elements-subnav.html'
        },
        globalFooter: {
          templateUrl: 'views/footer/global-footer.html'
        }
      },
      ncyBreadcrumb: {
        label: 'elements'
      } 
    })
    .state('elements.elements-library', {
      url: '/elements-library',
      views: {
        nav: {
          templateUrl: 'components/directives/main-nav.html'
        },
        content: {
          templateUrl: 'views/elements-subnav/elements-library.html'
        },
        localFooter: {
          templateUrl: 'views/footer/elements-subnav.html'
        },
        globalFooter: {
          templateUrl: 'views/footer/global-footer.html'
        }
      },
      ncyBreadcrumb: {
        label: 'elements library'
      } 
    })
    .state('elements.elements-library.neutral-colors', {
      url: '/neutral-colors',
      views: {
        nav: {
          templateUrl: 'components/directives/main-nav.html'
        },
        content: {
          templateUrl: 'views/elements-library/neutral-colors.html',
          controller: 'pageslideController'
        },
        globalFooter: {
          templateUrl: 'views/footer/global-footer.html'
        }
      },
      ncyBreadcrumb: {
        label: 'neutral colors'
      } 
    })

我只是展示了 elements-library.html 文件的和平，该文件具有指向第三级嵌套路由的链接。

elements-library.html

<div class="row">
  <div class="col-xs-12">

    <h2 class="evo-header-10-bold" id="neutral-colors">Neutral Colors<a ui-sref="elements.elements-library.neutral-colors" href="javascript: void(0);" class="evo-icon-10 evo-icon-circle-chevron-right" style="float: right; margin-top: 5px;"></a></h2>

    <div class="evo-space-15"></div>

  </div>
</div>

下面是从elements-library.html点击时我想在视图中加载的neutral-colors.html页面

中性色.html

<div class="container">

 <div class="row">
  <div class="col-xs-12">
   <div ncy-breadcrumb></div>
  </div>
 </div>

 <div class="row">
  <div class="col-xs-12">
   <h2 class="evo-header-15-bold no-line">Neutral Colors</h2>
  </div>
 </div>

</div>

从 index.html 文件中，我只是表明我已经包含了 data-ui-view="content"

index.html

 <div data-ui-view="content" class="container" ng-cloak></div>

当我单击 elements-library.html 中的链接“a ui-sref="elements.elements-library.neutral-colors ...”时，我的 URL 地址会更新为 http://localhost:3000/#/elements/elements-library/neutral-colors，并且我的 ncy-breadcrumb 也会更新到“元素/元素库/中性色”，但页面的其余部分（内容）没有更新。

在第三级嵌套“.state('elements.elements-library.neutral-colors'”时，我什至尝试将 content: 更改为 content@elements: 但随后出现此错误：

Uncaught SyntaxError: Unexpected token ILLEGAL

未捕获的错误：[$injector:nomod] 模块“进化”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

【问题讨论】：

当子路由可以在父级的ui-view 中设置时，似乎在每个路由中重复所有相同的视图是多余的
用 'content@' 代替 'content@elements' 怎么样？
我尝试了“content@”，但仍然遇到同样的错误。

标签： javascript angularjs routes state nested-routes

【解决方案1】：

我找到了解决方案。

我忘记在我的 elements-library.html 文件中包含“视图”。

<div data-ui-view="content" ng-cloak></div>

看看这个帖子Three level nested routes in angular-ui-router

【讨论】：