命名视图$ states不渲染模板

Question

https://plnkr.co/edit/9mFkN7oScYkKpPC0l57i?p=preview

预期

单击登录并导航到container状态。命名视图dashboard和feed应该呈现其模板。

结果

dashboard和feed的模板不会呈现，也不会显示控制器日志中的日志。

具有登录状态的routerApp

注入container模块。

// 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);
})

容器模块/配置和视图状态

下面我有容器的默认视图，包含它的模板和控制器，以及其他2个命名视图dashboard和feed。但是，在单击 Login 并转到container状态后，标记中的所有命名视图都不会呈现。

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

下面你可以看到两个命名视图dashboard和feed，但是他们的模板＆amp;控制器不渲染/初始化。

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

Answer 1

仍然希望得到一个答案，说明上面的命名视图为什么不呈现。但是我能够通过使用绝对命名的视图来获取feed和const container = { name: 'container', url: '/container', views: { '': { templateUrl: 'container-template.html', controller: function($scope) { console.log('CONTAINER view $state'); } }, 'dashboard@container': { templateUrl: 'dashboard-template.html', controller: function($scope) { console.log('DASHBOARD view $state'); } }, 'feed@container': { templateUrl: 'feed-template.html', controller: function($scope) { console.log('FEED view $state'); } } } } $stateProvider.state(container); 的模板：

numpy.ndarray.tolist

https://plnkr.co/edit/XnDUIqfVuBS2Hr2N1ooy?p=preview

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

在标记中：

main.c