AngularJS视图未在使用angular-ui-router的第三级嵌套路由上更新

Question

我正在尝试使用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>

下面是中性-colors.html页面，当我从elements-library.html单击时，我想在视图中加载它

Neutral-colors.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和myncy-breadcrumb也更新为“元素/元素库/中性色”，但页面的其余部分（内容）未更新。

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

Uncaught SyntaxError：意外的令牌非法

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

Answer 1

我找到了解决方案。

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

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

看看这篇文章angular-ui-router中的三层嵌套路由