Javascript 命名视图$states未呈现模板

预期 单击登录并导航到

容器

状态后。命名视图

仪表板

和

提要

应呈现其模板

结果

仪表板

和

提要

的模板不会呈现，也不会呈现到其控制器日志中的日志中

---

具有登录状态的routerApp 插入

容器

模块

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var tickersApp = angular.module('tickersApp', ['ui.router', 'container']);

tickersApp.config(function($stateProvider, $urlRouterProvider) {
    
  $urlRouterProvider.otherwise('/login');

  const login = {
    name: 'login',
    url: '/login',
    templateUrl: 'login-template.html',
    bindToController: true,
    controllerAs: 'l',
    controller: function($state) {
      this.login = function() {
        $state.go('container', { });
      }
    }
  }

  $stateProvider
    .state(login);
})

容器模块/config和视图状态 下面是容器的默认视图及其模板和控制器，以及其他两个命名视图

dashboard

和

feed

。但是，在单击登录并转到

容器

状态后，所有命名视图都不会呈现在标记中

// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
  container.config(function($stateProvider) {
    const container = {
      name: 'container',
      url: '/container',
      views: {
        '': {
          templateUrl: 'container-template.html',
          controller: function($scope) {
            console.log('CONTAINER view $state');
          }
        },
        'dashboard': {
          templateUrl: 'dashboard-template.html',
          controller: function($scope) {
            console.log('DASHBOARD view $state');
          }
        },
        'feed': {
          templateUrl: 'feed-template.html',
          controller: function($scope) {
            console.log('FEED view $state');
          }
        }
      }
    }
    $stateProvider.state(container);
  });

最后是container-template.html 下面您可以看到命名视图

仪表板

和

提要

，但是它们的模板和控制器不呈现/init

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <section>
        <!--<dashboard-module></dashboard-module>-->
        <div ui-view="dashboard"></div>
      </section>
    </div>
    
    <div class="col-sm-4">
      <section>
        <!--<feed-module></feed-module>-->
        <div ui-view="feed"></div>
      </section>
    </div>
  </div>
</div>

---

仍希望找到上述命名视图无法呈现的原因。但是，通过使用绝对命名的视图，我能够获得

dasboard

和

feed

的模板进行渲染：

在标记中：

<div class="row">
  <div class="col-sm-8">
    <section>
      <div ui-view="dashboard"></div>
    </section>
  </div>

  <div class="col-sm-4">
    <section>
      <div ui-view="feed"></div>
    </section>
  </div>
</div>

---

没有绝对命名ui，路由器正在尝试将

仪表板

和

提要

视图加载到

index.html

上的命名视图中。由于命名视图不存在，因此不会加载它们。一旦您告诉ui路由器相对于

容器加载它们，它们就会工作。所有这些都是您构建状态的方式。@Lex您介意看看我下一个关于命名视图和子状态的问题吗？：）
<div class="row">
  <div class="col-sm-8">
    <section>
      <div ui-view="dashboard"></div>
    </section>
  </div>

  <div class="col-sm-4">
    <section>
      <div ui-view="feed"></div>
    </section>
  </div>
</div>