命名视图 $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);
})

容器module/config和视图状态

下面是容器的默认视图及其模板和控制器，以及其他 2 个命名视图 dashboard 和 feed。但是，在单击 Login 并进入 container 状态后，none 的命名视图会在标记中呈现。

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

最后是容器-template.html

您可以在下面看到命名视图 dashboard 和 feed，但是它们的模板和控制器没有 render/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>

Answer 1

仍然希望得到关于为什么上面的命名视图不呈现的答案。但是，我能够通过使用绝对命名的视图来获取 dasboard 和 feed 的模板来呈现：

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

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

在标记中：

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

命名视图 $states 不呈现模板

Named view $states not rendering templates

javascript

state-management

angularjs

angular-ui-router

预计

结果

登录状态的routerApp

容器module/config和视图状态

最后是容器-template.html