16

編集: @actor2019 の回答に基づいて、問題をよりよく説明するために質問を更新したいと思います。

Angular UI-Router (v0.0.2) を使用して、基本状態を継承しながら、メインの「ページ」/状態間を適切に移動するようにアプリをセットアップしました。

インデックス.html:

<div ui-view></div>

base.html:

<!-- Header -->
<div>
    <!-- Header markup -->

    <!-- Search View -->
    <div ui-view="search"></div>
</div>

<!-- Page Content view -->
<div ui-view></div>

問題は app.js ファイルにあります。viewsパラメーターを状態に追加するとbase、すべてが機能しなくなります (100% 空白のページ)。そのパラメーターがないと、ページは正しくレンダリングされますが、検索ビューがありません。

app.js:

$urlRouterProvider.otherwise('/');

//
// Now set up the states
$stateProvider
  .state('base', {
    abstract: true,
    templateUrl: 'views/base.html',
    views: {
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })
  .state('base.home', {
    url: "/",
    templateUrl: "views/home.html"
  })
  .state('base.page2', {
    url: "/page2",
    templateUrl: "views/page2.html"
  });

この親の「基本」状態にビューを追加するにはどうすればよいですか?

ここに画像の説明を入力

更新:ここ での @actor2019 の回答の問題はsearch、状態が変化したときにビューが再初期化されることです。状態が変化しても、ベース レベルから離れたビューが持続するようにしたいと思います。

4

4 に答える 4

24

最初の明らかな間違い:

ビューを使用している間、状態にコントローラーとテンプレートを指定することはできません。それらは相互に排他的です...

これは、状態に「ビュー」がなく、コントローラーとテンプレートがある場合、UI-Router が自動的に「ビュー」プロパティを作成し、それらのプロパティを「空の」ビューにプルするためです...

.state('base', {
  abstract: true,
  templateUrl: 'views/base.html', //Can't do this
  views: { // when this is there.
    "search": {
      templateUrl: "views/search.html"
    }
  }
})

代わりに次のようにします。

.state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })

2番目の問題:

ビューのターゲティングがネストされたビューなどでどのように機能するかはあまり論理的ではありません。自分自身を 1 つのビュー内の 1 つのビューに制限するとうまくいくかもしれませんが、複数の名前付きビューで作業を開始すると、すべてが混乱します...名前のないビューを一番上に追加すると、多くの人が迷子になります...

ビューが UI-Router で機能する方法は、UI-Router の最悪の部分です...

あなたの例を考えると、抽象的な親状態から検索ビューをターゲットにする方法が完全にはわかりません...

.state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search@base": {
        templateUrl: "views/search.html"
      }
    }
  })

動作させることができれば... または、検索ビューを base.html の外に移動することもできますが、何らかの理由でそこに追加したと思います。

全体ビューの概念は、代わりにhttps://github.com/dotJEM/angular-routingを書くことになった最大の理由です。

于 2013-09-05T08:44:13.727 に答える
4

Child 状態は のhome.search代わりにある必要がありheader.searchます。あなたの場合、abstractレイアウトを保持するためにいくつかの状態を書きたいと思うかもしれません。

base.html

<div class="row-fluid">
    <div class="header">
        <div class="span3" ui-view="logo"></div>
        <div  class="span9" ui-view="menu"></div>
    </div>
</div>

<div class="row-fluid">
    <div class="content">
        <div class="span2" ui-view="sidebar"></div>
        <div  class="span10" ui-view="entry"></div>
    </div>
</div>

app.js で

$stateProvider
    .state('base',{
        abstract:true,
        url:'/',
        templateUrl: viewBase+'base.html'
    })
    .state('base.main',{
        url:'',
        views:{
            "logo":{
                templateUrl:viewBase+'main/logo.html'
            },
            "menu":{
                templateUrl:viewBase+'main/menu.html'
            },
            "sidebar":{
                templateUrl:viewBase+'main/sidebar.html'
            },
            "entry":{
                templateUrl: viewBase+'main/entry.html'
            }
        }})
于 2013-08-28T05:02:18.510 に答える
3

ui-router のドキュメントによると、アプリケーションが特定の状態 (状態が「アクティブ」) にある場合、その先祖の状態もすべて暗黙的にアクティブになります。たとえば、「contacts.list」状態がアクティブな場合、「contacts.list」の親状態であるため、「contacts」状態も暗黙的にアクティブになります。子ステートは、そのテンプレートを親の UI ビューにロードします。これを行う方法をより完全に理解するために、Nested States & Viewsというタイトルのドキュメントのセクションに目を通すことをお勧めします。

ここで提供されたコードでは、検索テンプレートの親状態は ですがhome、

.state('header.search', {
    templateUrl: "views/search.html",
    controller: "SearchCtrl"
})

headerビューが正しく読み込まれるためには、検索テンプレートの親状態が必要であることを意味します。そのため、app.js を次のように変更することで問題が解決すると思います。

app.js

$stateProvider
  .state('home', {
    url: "/",
    views: {
      '': {
        templateUrl: "views/mainContent.html",
        controller: "MainCtrl"
      },
      'header': {
        templateUrl: "views/header.html"
      },
      'footer': {
        templateUrl: "views/footer.html"
      },
    }
  })
  .state('home.search', {
    views: {
      'search': {
        templateUrl: "views/search.html",
        controller: "SearchCtrl"
      }
  })
  .state('anotherPage', {
    url: "/anotherPage",
    templateUrl: "views/anotherPage.html"
  });
于 2013-08-27T21:44:52.883 に答える
2

これは私にとってはうまくいきます。

$stateProvider
    .state('base', {
      abstract: true,
      url:'/',
      templateUrl: 'views/base.html'
    })
    .state('base.home', {
      url: "",
      views: {
      "search@base": {
        templateUrl: "views/searchOfHome.html"
      }
      //content@base, contentOfHome.html
    }
    })
    .state('base.page2', {
      url: "page2",
      views: {
      "search@base": {
        templateUrl: "views/searchOfPage2.html"
      }
      //content@base, contentOfPage2.html
    });

がルート状態の場合'base'、必要ありません'@base'

于 2013-08-29T07:15:18.460 に答える