0

私はangular.jsにウェブアプリを開発しました。私の質問は、私は左側のサイドバー上のメニューが一定であることです。ただし、右側のサイドバーのデータは、ユーザーが現在いるページによって異なります。ユーザーがホームページにある場合、右側のサイドバーには「データ1」などが表示されます。ユーザーが分析ページにいる場合は、右側のサイドバーにグラフが表示されます。私はこれを最も最適化された方法で角度を使って実装する方法を知らない。ユーザーが現在いるページに応じて、Webアプリケーションの右側のサイドバーにデータを動的に追加する方法はありますか?

どのような助力も大歓迎です。あなたは、角度ルーティングを実装する必要があり、事前

+0

ようなあなたのhtmlでng-viewを追加し、この

angular .module('myApp', ['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl: 'home.html', controller: ['$scope', function($scope){ $scope.page = 'Data 1'; }] }) .when('/analytics', { templateUrl: 'analytics.html', controller: ['$scope', function($scope){ $scope.page = 'Show Graph'; }] }) .otherwise({redirectTo: '/'}); }]); 

のように各ページのためのあなたの独立したhtml templatecontrollerを呼び出すことができます'ng-view'を使い、各メニューに対して異なる' controller'を割り当てることができます。あなたの現在の角度設定を見ることなく、あなたが正しい方向を得るのを助けることが難しいです。 – rachmatsasongko

答えて

0

ありがとう:

  1. ng-viewディレクティブで提供(右サイドバーに内部の)コンテナとしてHTML要素をキープあなたは別のフォルダに別のHTMLテンプレートを作成しなければならず、それはメニュー選択に従ってレンダリングされます。

  2. あなたはngIncludeディレクティブを見ている必要がありますが、特定のコントローラとテンプレート

+0

こんにちは、返信ありがとう、あなたは私にcodepen/jsfiddle/etcのようなライブサンプルを与えることができますか?また、私はui-routerを使用しています。 – Savvy

+0

これを確認してください、それは助けるかもしれません--- http://codepen.io/alexandremasy/pen/mDcEd –

0

に各状態/ templateurlを関連付けるために、あなたの固有のロジックを書き留め.config()を、書きます。これは、テンプレート(および対応するコントローラのデータ)を読み込むための最良の方法です。 L

0

あなたはngRouteを使用して、この

<div class="content"> 
    <div ng-view></div> 
</div> 

作業デモplunker

+0

こんにちは、返信いただきありがとうございます。実際には、これは私が求めたものではありません。私はui-routerを使用しており、すでにビューコンポーネントを持っています。そのビューコンポーネントの中で、ページごとに右側のサイドバーにロードする必要がある別のビューコンポーネントが必要です。 – Savvy

関連する問題