2

サイドバーとメイン コンテンツ領域を持つ AngularJS アプリケーションを構築しています。どちらも、JSON データを取得するために $http サービスを個別に呼び出して設定されます。サイドバーの内容は基本的に目次であり、サイドバー項目の 1 つをクリックするとメイン エリアが更新されることを目的としています。

私がこれに最初に取り組んだのは、サイドバーとメイン領域を 1 つのパーシャルにまとめ、それを両方の取得を行うコントローラーに関連付けることでした。アプリケーションにはコントローラーを URL に関連付けるルートがあり、サイドバーのリンクは適切なパラメーターを使用してこれらの URL にアクセスし、目的のコンテンツをメイン領域に表示します。これはすべて機能しますが、ページ全体が更新されます。「部分的」は実際には「全体」です。

私がやりたいことは、サイドバーのリンクをクリックすると、メイン コンテンツ エリアのみが更新されるようにすることです。1 つ考えられるのは、どうにかしてそれを 2 つのコントローラー/部分ペアに分割し、サイドバーのクリックで更新を要求する方法を見つけることです。ただし、これを行うメカニズムについてはわかりません。もう 1 つのアプローチは、1 つのコントローラーにデータを保持し、この更新をトリガーする何らかの共有状態を使用することです。リンクに ng-click ディレクティブを設定してこれを実行しようとしましたが、期待どおりにスコープ変数が更新されませんでした。

この種の AJAX 駆動の部分ページ更新を実現するためにアプリケーションを構築する推奨される方法はありますか? かなり一般的なケースのように思えますが、AngularJS を十分に習得していないため、解決策を得ることができません。

4

1 に答える 1

8

これは私がやっていることです：

2 つのサービスがあります。1 つはサイドメニュー用で、もう 1 つはメイン コンテンツ用です。それらは両方ともコントローラーに注入されます。

クロス サービス コールを処理する$broadcastために、イベントの送信に使用します。

非常にうまく機能し、非常にクリーンなコードです。

コメントに基づくサービスの使用に関する追加情報

sidemenu には共有メニュー サービスがあり、すべてのコントローラーが同じメニューを使用できます。

maincontent サービスは共有する必要はありませんが、コントローラーが範囲外になったときにサービスがデータを失わないため、それらを使用します。そうしないと、コントローラーは他のメカニズムを使用してデータを再入力する必要があります。私にとって、サービスは何もコーディングすることなくそれを処理します

さまざまなビューを表示するには、次のメイン レイアウト html を使用します。

<div >
    <!-- left menu -->
    <div id="left" ng-include src="menu.view" ></div>

    <!-- main content -->
    <div id="main" ng-include src="maincontent.view"></div>
</div>

コントローラー

function myControllerCtrl($scope, $rootScope, menuService, maincontentService) {
    $scope.menu = menuService;
    $scope.maincontent = mainContentService
}

メニューサービス

app.factory('menuService', ['$rootScope', function ($rootScope) {
    var service = {
        view: 'leftmenuview.html',

        MenuItemClicked: function (data) {
            $rootScope.$broadcast('menuitemclicked', data);
        }
    };
    return service;
}]);

主なコンテンツ サービス

app.factory('maincontentService', ['$rootScope', function ($rootScope) {
    var service = {
        view: 'maincontentview.html',

        MenuItemClicked: function(data){
          //handle updating of model based on data here
        }
    };

    $rootScope.$on('menuitemclicked', function (event, data) { service.MenuItemClicked(data) });

    return service;
}]);
于 2013-08-16T01:37:17.520 に答える