Angular 1.3 + ui-router + generator-ng-poly 嵌入嵌套（？）视图不工作

Question

我是 Angular、ui-router 和 generator-ng-poly 的新手，希望有人可以帮助解决可能是简单语法问题。

我正在为一个新项目使用 generator-ng-poly，并使用 ui-router 和 HTML 从 "Deep Level Example" 使用基于 Angular 1.3 的应用程序.

首先，我创建了一个 "home" 模块，然后在其中创建了一个 "header" 模块。所以...

 yo ng-poly:module home
 yo ng-poly:module home/header

这给了我这两个控制器： app/home/home.js

    (function () {
  'use strict';

  /* @ngdoc object
   * @name home
   * @requires $stateProvider
   *
   * @description
   *
   */
  angular
    .module('home', [
      'ui.router',
      'home.header'
    ]);

  angular
    .module('home')
    .config(config);

  function config($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home/home.tpl.html',
        controller: 'HomeCtrl',
        controllerAs: 'home'
      });
  }

})();

和 app/home/header/header.js

(function () {
  'use strict';

  /* @ngdoc object
   * @name home.header
   * @requires $stateProvider
   *
   * @description
   *
   */
  angular
    .module('home.header', [
      'ui.router'
    ]);

  angular
    .module('home.header')
    .config(config);

  function config($stateProvider) {
    $stateProvider
      .state('header', {
        url: '/header',
        templateUrl: 'home/header/header.tpl.html',
        controller: 'HeaderCtrl',
        controllerAs: 'header'
      });
  }

})();

现在我想在 home.tpl.html 中使用 "header"，但我正在为如何做到这一点而苦苦挣扎。据我了解

<div ui-view=“header”></div>

或

<div ui-view=“home.header”></div>

应该可以。但两者都不是。数小时的谷歌搜索没有帮助，因为所有示例都使用更常见的 $stateProvider 格式，其中有如下链接状态：

$stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home/home.tpl.html',
        controller: 'HomeCtrl',
        controllerAs: 'home'
      })
      .state('home.header', {
        url:'/header',
        templateUrl: 'home/header/header.tpl.html',
        controller: 'header/header-controller.js',
        controllerAs: 'header'
      });

我应该如何引用 "header" 才能使其在 home.tpl.html 中正确显示？

Answer 1

为了能够在 home 状态中使用 header 状态，它们将需要嵌套（链接）。您的应用程序一次只能处于一种状态，但嵌套状态需要允许您所需的使用。

因此，这并不明显，但是由于注册的工作方式（重点是我的），您可以安全地使一个状态单独成为另一个状态的父状态 files/configs：

If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered. - Nested States

此外，ui-view 属性没有采用您在示例中显示的所需状态的名称。它创建了一个命名视图（一个非常强大的功能 - Multiple Named Views），但你可能还不需要它。离开是：

<div ui-view></div>

因此，要将应用程序设置为正确的状态，请使用 $state.go() 函数：例如

$state.go('home');

Answer 2

没有完全理解您的目标。是否要在主视图 home 的级别添加命名视图 header（参见 Multiple-Named-Views）或简单的嵌套视图？

如果是这样，你不应该给你一个名字ui-在html中查看，并使用点语法定义子路由的名称，以将您的层次结构推断为 $stateProvider，如下所示：

$stateProvider
  .state('home.header', {...})

Angular 1.3 + ui-router + generator-ng-poly 嵌入嵌套（？）视图不工作

Angular 1.3 + ui-router + generator-ng-poly embedding nested(?) views not working

javascript

angularjs

angular-ui-router

yo