13

私はAngular、ui-router、およびgenerator-ng-polyを初めて使用し、単純な構文の問題である可能性が高いものを誰かが助けてくれることを望んでいます.

私は新しいプロジェクトに generator-ng-poly を使用しており、ui-router と HTML を使用する Angular 1.3 ベースのアプリで「ディープ レベルの例」から作業しています。

最初に「ホーム」モジュールを作成し、次にその中に「ヘッダー」モジュールを作成しました。そう...

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

これにより、次の 2 つのコントローラーが得られます: 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”&gt;</div>

また

<div ui-view=“home.header”&gt;</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 内に正しく表示されるようにするには、「ヘッダー」をどのように参照すればよいですか?

4

2 に答える 2

3

header状態で状態を使用できるようにするにはhome、ネスト (チェーン) する必要があります。アプリケーションは一度に 1 つの状態にすることしかできませんが、ネストされた状態では必要な使用を許可する必要があります。

したがって、明らかではありませんが、登録が機能する方法により、別のファイル/構成で1つの状態を別の状態の親にすることが安全にできます(強調は私のものです):

のように 1 つの状態のみを登録する場合は、ある時点でcontacts.list呼び出される状態を定義する必要があります。そうしないと、状態が登録されません。状態は定義されるまでキューに入れられます。これを行ってもエラーは表示されないため、子が適切に登録されるように親を定義するように注意してください。-ネストされた状態contactscontacts.listcontacts

また、ui-view例で示したように、属性は必要な状態の名前を取りません。代わりに、名前付きビュー (非常に強力な機能 - Multiple Named Views ) を作成していますが、おそらくまだ必要ではないものです。ただ残すのは次のとおりです。

<div ui-view></div>

したがって、アプリケーションを正しい状態に設定するには、$state.go()関数を使用します。

$state.go('home');
于 2015-03-01T23:08:34.947 に答える
2

あなたの目標を正確に理解していませんでした。メイン ビューのホーム(複数の名前付きビューを参照) または単純なネストされたビューのレベルに名前付きビューヘッダーを追加しますか?

その場合、html で ui-view に名前を付けず、次のようにドット構文で子ルートの名前を定義して、階層を $stateProvider に推測する必要があります。

$stateProvider
  .state('home.header', {...})
于 2015-05-12T14:11:36.147 に答える