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

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

这给了我这两个控制器: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中的"标题",我正在努力解决这个问题.从我的理解或者

<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

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

所以，这并不明显，但由于注册的工作方式，您可以安全地在单独的文件/配置中使一个状态成为另一个状态的父级（重点是我的）：

如果您只注册一个状态，例如contacts.list，则必须定义在某个时刻调用的状态contacts，否则不会注册任何状态。该状态contacts.list将排队等待contacts定义。如果这样做，您将不会看到任何错误，因此请务必小心定义父级，以便子级能够正确注册。-嵌套状态

此外，该ui-view属性不会采用您在示例中所示的所需状态的名称。相反，它创建一个命名视图（一个非常强大的功能 -多个命名视图），但您可能还不需要。只是离开是这样的：

<div ui-view></div>

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

$state.go('home');