21

次の問題を解決する必要があります。

ここに画像の説明を入力

ローカル メニュー (左側のメニュー) 内から、サブページを選択できます。典型的なシナリオ。そして今、ローカルメニューアイテムに関連するコンテンツをリロードしたいと思います. 純粋なAngularでは、それを達成するための標準的な簡単な方法がわかりません. サーバーから手動でマークアップを取得し、コンテンツ領域を手動で置き換えることができました。より良い方法はありますか？ググってたどり着いた

https://github.com/angular-ui/ui-router

しかし、詳細を掘り下げる前に、この問題を解決する方法をアドバイスしていただけないでしょうか。または、この問題を ui-router で解決できるかどうかのアドバイスも。

4

5 に答える 5

17

ui-router でネストされた状態を使用したい。このようなもの

$stateProvider
    .state('home', {
            templateUrl: 'views/home.html',
            url: '/home',
            controller: 'homeCtrl'
        })
    .state('home.localmenu1', {
        templateUrl: 'views/localmenu1.html',
        url: '/home/local1',
        controller: 'local1Ctrl'
    })
    .state('home.localmenu2', {
        templateUrl: "views/localmenu2.html",
        url: '/home/local2',
        controller: 'local2Ctrl'
    })
    .state('products', {
        templateUrl: 'views/products.html',
        url: '/products',
        controller: 'productsCtrl'
    })

したがって、「views/home.html」内にui-viewディレクティブを含む要素を配置できます。次に、この要素にはサブステート ( home.localmenu1、home.localmenu2) のビューが含まれます。

于 2013-10-24T15:53:09.710 に答える
9

kseb の回答と多少似ていますが、すぐに使用できる Angular を使用する場合は、これに ng-includeを使用できます。コントローラーを取り付けることで、他の「実際の」ビューと同じように、そこに表示したいものを簡単に変更できます。

/views に menu.html ファイルを作成する場合:

<li ng-repeat="menu in menus">
    <a href="{{menu.link}}">{{menu.name}}</a>
</li>

次のように index.html に含めることができます。

<body>
    <ul ng-include="views/menu.html" ng-controller="MenuCtrl"></ul>
    <div class="container" ng-view></div>
</body>

それはトリックを行い、完全に有効であり、すべてのブラウザーで機能します。コントローラーは、使用する可能性のある他のコントローラーと同じように使用できます。

于 2014-04-03T10:05:29.953 に答える
1

あなたは確かにできます、そしてそれは非常に簡単です.

ui-router のドキュメント、特にネストされた状態とビューに関するセクションのコード例と plunker を確認してください。

于 2013-10-24T15:31:06.647 に答える