javascript - Angular 1.3 + ui-router + generator-ng-poly 嵌入嵌套(？) View 不起作用

Question

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

我正在为一个新项目使用 generator-ng-poly，并使用 ui-router 和 HTML 从“深度示例”开始使用基于 Angular 1.3 的应用程序。

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

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

这给了我这两个 Controller :应用程序/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'
      });
  }

})();

和应用程序/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'
      });

我应该如何引用“标题”以使其在 home.tpl.html 中正确显示？

Answer 1

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

因此，这并不明显，但由于注册的工作方式(重点是我的)，您可以在单独的文件/配置中安全地将一个状态设为另一个状态的父级:

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 属性并未采用您在示例中显示的所需状态的名称。它正在创建一个命名 View (一个非常强大的功能 - Multiple Named Views )，但您可能还不需要它。就这样离开:

<div ui-view></div>

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

$state.go('home');