0

私は ui-router を使用しており、私のレイアウトは 2 つの ui ビュー、サイドバー、メイン コンテンツに分かれています。

サイドバーには、メイン コンテンツ モデルを変更するオプション (値の変更、フィルターの設定) が用意されていますが、これは問題です。私が理解している限り、同じコントローラー (インスタンス) を共有することはできないからです。

この時点で、私が検討している 2 つの解決策があります。その切断された問題で必要なものを呼び出すメッセージ

私はどちらの解決策も好きではありません。あなたのデザイン案をいただければ幸いです

現在のルーティング定義の例 (私のアプリケーションでは同じレイアウトが一般的であり、繰り返し使用されていることに注意してください:

$stateProvider.state('home', {
                url: "/home",
                views: {
                    main: {               
                        templateUrl:"homeTemplate.html",
                        controller: "HomeController"
                    },
                    sidebar: {templateUrl: "homeSidebarTemplate.html"}
                }
            })
4

1 に答える 1

1

angular サービスを見てみましょう

これらの目的に使用できます。サービスは、任意のモジュール間でデータを共有できるシングルトンです。データをサービスに入れ、メイン ビューとサイド バーでモデルとして使用します。

例えば：

angular.module('myApp.someNamespace', [])
  .factory('someService', function () {

  var service = {};
  service.myList = {1,2,3};
  service.myMenu = {'apples', 'oranges', 'pears'}

  service.addToList = function(number) {
   service.myList.push(number);
  }
  return service;
});

このサービスをコントローラーとサイドバー ディレクティブに挿入します。

angular.module('myApp.myControllers', [])
    .controller('myCtrl', function ($scope, someService) {

    $scope.model = someService;
});

ビューで、サービス変数/メソッドにバインドします。

<div ng-repeat="number in model.myList">
   <input type="number" ng-model="number"/>
</div>
<input type="number" ng-model="newNumber"/>
<button ng-click="model.addToList(newNumber)">Add</button>

このパターンを使用するもう 1 つの利点は、シングルトン サービスからデータを取得するため、前後にナビゲートするとき (よりステートフル) にビューが元の場所にとどまることです。また、API からデータを取得する必要があるのは 1 回だけです (もちろん、ブラウザを更新するまで)。

于 2015-07-06T07:39:50.697 に答える