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

為了能夠在home狀態下使用header狀態，它們將需要嵌套（鏈接）。 您的應用程序一次只能處於一種狀態，但嵌套狀態需要允許您使用所需的狀態。

所以，它並不明顯，但是由於注冊的工作方式（重點是我的），你可以安全地將一個狀態作為另一個狀態/ configs中的另一個狀態：

如果你只注冊一個州，比如contacts.list ，你必須在某個時刻定義一個叫做contacts的狀態，否則就不會注冊任何狀態。 狀態contacts.list將排隊，直到定義了contacts 。 如果這樣做，您將不會看到任何錯誤，因此請務必定義父級，以便讓孩子正確注冊。 - 嵌套國家

此外， ui-view屬性不會顯示您在示例中顯示的所需狀態的名稱。 而是創建一個命名視圖（一個非常強大的功能 - 多個命名視圖 ），但你可能還不需要它。 離開就像：

<div ui-view></div>

因此，要將應用程序設置為正確的狀態，請使用$state.go()函數：例如

$state.go('home');

Answer 2

沒有完全理解你的目標。 是否要在主視圖主頁 （請參閱多命名視圖 ）或簡單嵌套視圖的級別添加命名視圖標題 ？

如果是這樣，你不應該在html中給你ui-view命名，並用點語法定義子路由的名稱，以推斷你對$ stateProvider的層次結構，如下所示：

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