0

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

预期的

单击Login并导航到该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，但是它们的模板和控制器不渲染/初始化。

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

1 回答 1

0

仍然希望得到关于为什么上面的命名视图不呈现的答案。但是，我能够使用绝对命名的视图获取模板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>

于 2017-03-22T15:20:40.020 回答