web-dev-qa-db-ja.com

AngularJS - 単一テンプレート内の複数のng-view

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

angularjsng-view
130
Jayram

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

内容を変更する方法はいくつかあります。 ng-include 、 ng-switch 、またはrouteProviderを使用して異なるコントローラとテンプレートをマッピングする。

97
pasine

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

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

Multiple Named Viewsのドキュメントをチェックしてください こちら 。

39
Morteza Ziaeemehr

私はあなたがただ一つのng-viewを持つことによってそれを達成することができると信じます。メインテンプレートでは、サブビュー用にng-includeセクションを作成してから、メインコントローラーで各サブテンプレートのモデルプロパティを定義できます。それらが自動的にng-includeセクションにバインドするように。これは複数のng-viewを持つのと同じです。

ng-includeドキュメント にある例を確認することができます。

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

18
Tekz

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

ただし、 このプロジェクト を使用すると有効になります（ui-routerを探してください）。

13
ŁukaszBachman

複数のビューまたはネストしたビューを持つことができます。しかし、ng-viewによるものではありません。

角度付きのプライマリルーティングモジュールは複数のビューをサポートしません。しかし、あなたはUIルータを使用することができます。これは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>

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

$ bower install angular-ui-router
8
Farshid Saberi

複数の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コンテンツはあなたのコントローラにバインドされます。

0
Aslam anwer