AngularJSにテンプレートダイナミックを含めるには？

私は3種類のビュー（DetailView、CardView、Column）テンプレート/ htmlページをシングルページで表示します。ユーザーはこれらの3つのビューを切り替えることができます。AngularJSにテンプレートダイナミックを含めるには？

一度に1つのビューをページにバインドしたい場合は、ユーザーの切り替えによって以前のビューが削除され、新しいビューがバインドされます。私はモデルをバインドするためのデータを持っているので、データをバインドするためにサービスを呼び出す必要はありません。私は、これらの3つのビューの間で、更新ページとロードデータなしで切り替える必要があります。

問題は、3つのビューをバインドするとdiv-idと競合し、DOMのすべてのビューに対してたくさんのHTMLコードがあることです。

読み込みを行わずにこれらの異なるビューを切り替える方法を教えてください。&ページを更新しますか？あなたが求めているその1そのデフォルトの動作をルーティングすることでページを切り替える場合

<body> 
    <div ng-include="'detailView.html'" ng-show="detailView"></div> 
    <div ng-include="'cardView.html'" ng-show="cardView"></div> 
    <div ng-include="'cardView.html'" ng-show="cardView"></div> 
</body>

出典

2016-04-29 Chirag Kavathiya

私は角度のアプリを知っているようにはSPA（シングルページアプリケーション）ですので。それはページを再読み込み/リフレッシュしません。以前のビューが削除され、新しいビューがバインドされます。

チェックこのガイド：https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

また、ルートを切り替えるために$ロケーションサービスを使用するようにしてください。ページをリロードしません。 $ location.path（ "/ your-route"）。

出典

2016-04-29 09:55:21 Robert

角度モジュールにはルーティングモジュールがあります。この方法で、独自のURL、HTMLテンプレート、およびコントローラを使用してルート（ページ）を定義できます。

構成例：とにかく https://github.com/angular-ui/ui-router

：私はあなたがUI-ルータを使用することをお勧め大きなアプリケーションでは https://docs.angularjs.org/tutorial/step_07

：

YOUR_MODULE.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/phones', { 
     templateUrl: 'partials/phone-list.html', 
     controller: 'PhoneListCtrl' 
     }). 
     when('/phones/:phoneId', { 
     templateUrl: 'partials/phone-detail.html', 
     controller: 'PhoneDetailCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/phones' 
     }); 
    }]);

あなたが角度のドキュメントでそれについての詳細を読むことができますルーティングなしで簡単なものを探しているなら、NG-SHOWの代わりにNG-IFを使うべきです。 NG-SHOWはHTMLをcss（display none）で隠すだけです。つまり、同じIDを持つ要素の競合が発生する可能性があります。 NG-IFはDOMから要素を削除するため、競合は発生しません。

幸運を祈る！

出典

2016-04-29 10:03:58 user3125999

最初にページが読み込まれたときに、特定のフラグが表示され、そのビューにデータをバインドするサービスへの対応する呼び出しが表示されます。

次回、モデルが更新され、新しいフラグが設定され、新しいビューが遊びに来て、同様のサービスは、データをバインドする..

最初はfalseにすべてのモデルを設定し、デフォルトのためのいずれかに該当します。ビュースルー

トグル：特定の時点でこの貫通

<body> 
    <div ng-include="'detailView.html'" ng-if="detailView"></div> 
    <div ng-include="'cardView.html'" ng-if="cardView"></div> 
</body>

、唯一のdivがアクティブであり、IDが競合しないであろう。コントローラで

：

If($scope.detailView == true){ 
    //Call to service for data.. 
}

同様に、新しいモデルが更新されたときに、falseに以前のすべての設定。

目的をより明確にするためにクエリを更新してください。

出典

2016-04-29 10:06:08 Sajal

AngularJSにテンプレートダイナミックを含めるには？

答えて

関連する問題