AngularJS-1つのテンプレートに複数のng-view

132

AngularJSを使用して動的Webアプリを構築しています。ng-view1つのテンプレートに複数を含めることはできますか？

angularjs ng-view

— ジェイラム
ソース

2

プルリクエストがあるようですが、まだいくつかのバグがあります：github.com/angular/angular.js/pull/1198

— Alp

4

Jan VarwigがAngularでのディレクティブの役割について書いています。それはあなたの質問への答えではありませんが、いくつかのケースのための彼のアイデアは良い選択肢かもしれません：jan.varwig.org/archive/angularjs-views-vs-directives/...

— ユハPalomäki

角度チュートリアルを行っていて、これとまったく同じ質問がありましたが、これはあまり明確ではありませんが、かなり深い概念のようですが

— qwwqwwq

100

あなたは1つだけを持つことができますng-view。

あなたはいくつかの方法でその内容を変更することができますng-include、ng-switchまたはrouteProviderによって異なるコントローラとテンプレートをマッピングします。

— パシン
ソース

1

コントローラーとテンプレートをマッピングすると、ng-view要素全体が置き換えられますよね？

— zx1986 2013

9

ウィジェットのコンテンツを動的に変更するのはどうですか？ウィジェットのビュー、ウィジェットのコントローラー、ウィジェットのモデルを作成しませんか？

— Ray Suelzer、2013年

ビューを使用することをお勧めしますか？ng-showおよびng-hideでdivを定義し、変数を使用してそれらの可視性を制御する方が良いのではないですか？複数のコンポーネントを非表示/表示したい場合があるため

— SomethingSomething

39

UI-Routerは、次のことを支援できるプロジェクトです。https：//github.com/angular-ui/ui-router その機能の1つは、複数の名前付きビューです。

UIルーターには多くの機能があり、高度なアプリで作業している場合は、それを使用することをお勧めします。

複数の名前付きビューのドキュメントをここで確認してください。

— モルテザ・ジエ
ソース

6

残念ながらui-routerのreadmeにあるように：注：UI-Routerは活発に開発中です。そのため、このライブラリは十分にテストされていますが、APIは変更される可能性があります。変更ログをたどり、それに応じて使用状況を更新できる場合にのみ、本番アプリケーションでの使用を検討してください。

— trainoasis 2014

1

@trainoasis複数のプロジェクトで使用しました。「非常に」安定しているようです。これまで、APIの変更について問題はありませんでした。実際、APIの大きな変更を覚えていません。

— Morteza Ziyae 2015年

19

たった一人で達成できると思いますng-view。メインテンプレートでサブビューのng-includeセクションを作成し、メインコントローラーで各サブテンプレートのモデルプロパティを定義できます。自動的にng-includeセクションにバインドされるようにします。これは、複数のng-view

あなたはドキュメントで与えられた例をチェックすることができng-include ます

例では、ドロップダウンリストからテンプレートを変更すると、コンテンツが変更されます。ここでは、メインが1つng-viewあり、ドロップダウンを選択してサブコンテンツを手動で選択する代わりに、メインビューがロードされたときと同じようにします。

— Tekz
ソース

2

UI-Routerのようなソリューションがない場合、ng-includeは実際に実行可能な代替手段です。ng-includeが達成できないのは、URL（状態）駆動のマルチビューです。$ routeは、現在のURLに基づいて異なるビューを動的にレンダリングできません。ng-include ドキュメントの例のように、コントローラーでカスタムロジックを使用してAngularの腕をひねり、それを実現することもできますが、それは望ましいアプリケーションアーキテクチャパターンではなく、UI-Routerが適切なタイプのソリューションです。

— Yiling

@Yilingコメントにプラス1つ。ng-includeの使用は回避策です。

— Farshid Saberi

13

通常のng-viewモジュールを使用すると、複数の動的テンプレートを持つことはできません。

ただし、このプロジェクトではこれを行うことができます（を探してくださいui-router）。

— ŁukaszBachman
ソース

3

angular-uiは（近い）将来的には良い選択のように思えますが、それでも本番環境で使用するには非常に不安定に思われます

— David Barreto

8

複数のビューまたはネストされたビューを持つことが可能です。しかし、ng-viewではありません。

Angularのプライマリルーティングモジュールは複数のビューをサポートしていません。ただし、ui-routerを使用できます。これは、Github、angular-ui / ui-router、https：//github.com/angular-ui/ui-routerから入手できるサードパーティのモジュールです。また、ngRouterの新しいバージョン（ngNewRouter）も現在開発中です。現時点では安定していません。そこで、ui-routerを使用した簡単な起動例を紹介します。これを使用して、ビューに名前を付け、レンダリングに使用するテンプレートとコントローラーを指定できます。$ stateProviderを使用して、特定の状態のビュープレースホルダーをレンダリングする方法を指定する必要があります。

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

このサンプルでは、angularjsとangular-ui.routerを参照する必要があります。

$ bower install angular-ui-router

— ファルシッド・サベリ
ソース

Farshid、ありがとうございます。これは、angular-ui / ui-router Githubリポジトリgithub.com/angular-ui/ui-routerで言及する必要があります。ここで、モジュールを取得しました

— totallytotallyamazing

なぜそうする必要があるのかわかりません。ヘッダー/フッターをng-includeしてコンテンツをng-viewしないのはなぜですか？

— user441521 2016年

ng-includeは、ファイルがホストされている場合に機能します。nodejs上。ローカルディレクトリを使用している場合、クロスドメインエラーがスローされます。

— シド

0

複数のng-viewを持つことはできません。以下は、私の要件を解決したユースケースです。モデルダイアログでタブ付きの動作にしたかったのです。ルーターリンクを呼び出すハイパーリンクのあるタブをクリックすると問題が発生しました。タブのボタンとcssを使用してこれを解決しました。ユーザーがタブをクリックすると、ng-routerを常に呼び出すハイパーリンクは実際には呼び出されません。ユーザーがタブをクリックすると、HTMLを動的にロードするメソッドが呼び出されます。以下はタブのクリック時の機能です

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

ユーザー$ templateRequest。test_template.htmlページにHTMLコンテンツを追加します。このhtmlコンテンツはコントローラーにバインドされます。

— アスラムアンワー
ソース