6

ページ内の 2 つの場所で 1 つのコントローラーのデータを共有したいと考えています。例えば：

<div ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="x" /> {{x}}
    </div>
</div>
<!-- these are in totally different places and I do not want, nor can't nest them -->
<div ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="x" /> {{x}}
    </div>
</div>

そしてもちろん、これ：

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
    $scope.x = 'test';
});

最初の入力テキストが何を入力しても、2 番目の入力テキストに反映されるようにするにはどうすればよいですか? およびその逆？データの 1 つのコピーを維持しながら、基本的に同じデータがこれら 2 つのセクションに伝播されます。

JSFiddle はこちら: http://jsfiddle.net/LETAd/

PS: これに関連性がある場合は、手動でブートストラップします。

ありがとう！

4

2 に答える 2

4

コントローラー間でデータを共有するには、通常、サービスが最適なオプションです。共有データをサービスに入れ、サービスをコントローラーに挿入します。

function myController($scope, MyService) {

これにより、各スコープ/コントローラー インスタンスが共有データにアクセスできるようになります。

サービスはシングルトンであるため、共有データのインスタンスは 1 つしか存在しないことに注意してください。

これは、2 つのコントローラーがどのようにデータを共有できるかを示す (私が書いたものではありません)フィドルです。

AngularJS: コントローラー間で変数を渡すにはどうすればよいですか?も参照してください。および
Angularjs: 双方向のデータ バインディングとコントローラーのリロード。

于 2013-03-08T17:28:21.790 に答える
3

理想的には、1 つのページで 1 つのアプリケーションのみを実行する必要があります。コントローラー間で通信する必要があるため、実際には単一のアプリケーションを実行する必要があります。おそらくオンbodyまたはhtml。次に、すべてのコントローラーをカプセル化するメインコントローラーを作成できます。(コントローラーの継承)。

これは次のようになります。

<html ng-app="myApp">
  <head>...</head>
  <body ng-controller="MainCtrl">
    <div ng-controller="MyCtrl">
      <input type="text" ng-model="mainView.x" /> {{x}}
    </div>
    <div ng-controller="MyCtrl">
      <input type="text" ng-model="mainView.x" /> {{x}}
    </div> 
  </body>

そしてJS：

function MainCtrl($scope) {
  $scope.mainView = {};
}
function MyCtrl($scope) {

}

MainController に mainView オブジェクトを作成しました。MyController とそのスコープはプロトタイプとして MainController から継承されるため、そこに到達できます。
注意すべき点が 1 つあります。使用するときはngModel、ほとんどの場合、どこかにドットを入れるのが最善です (angularjs の作成者からの言い換え)。

JavaScript のプロトタイプの継承により、次のようになります。

// In MainCtrl
$scope.mainView.x = "hello";
$scope.myX = "hello";

// In MyCtrl
$scope.mainView.x
>> "hello"
$scope.myX
>> "hello"
$scope.mainView.x = "welcome";
$scope.myX = "welcome";

// In MainCtrl
$scope.mainView.x
>> "welcome"
$scope.myX
>> "hello"

JavaScript でオブジェクトのプロパティを要求すると、そのプロパティが存在するかどうかを確認し、存在しない場合はプロトタイプ チェーン (親) に移動し、そこで検索し、見つかるまで上に移動します。またはプロトタイプチェーンの最後に行きます。

したがって、 を設定すると、実際には親スコープでは$scope.myX変更されませんが、現在のスコープで呼び出されるプロパティが作成されます。プロトタイプの階層のためです。ただし、$scope.mainView.x を設定するときは、まず親スコープの値を変更するように要求してから設定します。myXmyX mainView x

元の質問とは無関係のように感じることはわかっていますが、コントローラーとスコープの継承に入ると、これに苦しむことは間違いありません。

于 2013-03-08T21:10:11.233 に答える