web-dev-qa-db-ja.com

Angular UIルーター-継承された状態のビュー

edit：@ actor2019の回答に基づいて、問題をより詳しく説明するために質問を更新します：

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

Index.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"
  });

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

enter image description here

UPDATE：@ actor2019の回答の問題 ここ は、状態が変化するとsearchビューが再初期化されることです。基本レベルからのビューを、状態の変更を通じて永続化してほしい。

javascriptangularjsangular-uiangular-routingangular-ui-router
16
JT703

最初の明らかな間違い：

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

これは、「ビュー」がなく、状態にコントローラーとテンプレートがある場合、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 を作成した最大の理由です。

24
Jens

子の状態は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'
            }
        }})
4
maow

Ui-router documentation によると、アプリケーションが特定の状態にある場合、つまり状態が「アクティブ」である場合、そのすべての祖先状態も暗黙的にアクティブです。したがって、たとえば、「contacts.list」状態がアクティブである場合、「contacts.list」の親状態であるため、「contacts」状態も暗黙的にアクティブになります。子の状態は、テンプレートを親のUIビューにロードします。 documentation のセクションのセクションを見て、ネストされた状態とビューを見て、方法を完全に理解することをお勧めしますこの。

ここで提供したコードでは、検索テンプレートの親の状態は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"
  });
3
drdalton

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

$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'は必要ありません。

2
maow