5

AngularJS がモデル用の特別な構文を必要としないことは気に入っていますが、頭を包み込めないように見えるシナリオが 1 つあります。以下を取る

私の dataService は、私が使用しているデータ ストレージのフレーバーをラップします。

app.factory('dataService', function() {
    var data = 'Foo Bar';

    return {
        getData: function() {
            return data;
        }
    };
});

同じデータにアクセスする 2 つのコントローラーがあります。

app.controller('display', function($scope, dataService) {
    $scope.data = dataService.getData();
});

app.controller('editor', function($scope, dataService) {
    $scope.data = dataService.getData();
});

2 つのビューがあり、一方がデータを変更する場合、もう一方が自動的に更新されないのはなぜですか?

<div ng-controller="display">
<p>{{data}}</p>
</div>

<div ng-controller="editor">
<input type="text" value="{{data}}"/>
</div>

データをノックアウトの観測可能なオブジェクトにする必要があるノックアウトのようなものでこれがどのように機能するかを理解しています。したがって、アプリケーションの一部を変更すると、サブスクリプションがトリガーされ、別の部分のビューが更新されます。しかし、Angularでそれを行う方法がわかりません。

何かアドバイス？

4

2 に答える 2

7

それを機能させるために私が提案するいくつかの変更があります。

  1. データ オブジェクトを文字列からオブジェクト型に変更する
  2. ng-modelを使用して入力フィールドをバインドします

HTML

<div ng-controller="display">
  <p>{{data.message}}</p>
</div>

<div ng-controller="editor">
  <input type="text" ng-model="data.message"/>
</div>

脚本

app.factory('dataService', function() {
    var data = {message: 'Foo Bar'};

    return {
        getData: function() {
            return data;
        }
    };
});

デモ:フィドル

于 2013-04-01T03:02:14.837 に答える
1

私は同じ状況で立ち往生していませんが、私に飛び出すのは、あなたがスコープにこだわっていることです. スコープが議論された角度のあるビデオがありました。モデル オブジェクトをスコープに配置し、スコープをモデル オブジェクトとして使用しないでください。

あなたの例では、2 つのスコープがそれぞれ文字列で作成されますdata。は文字列で不変であるためdata、変更するとエディターのスコープで置き換えられます。あなたの例ではdataService、オブジェクトを返し、そのオブジェクトがコントローラー間で共有されている場合、おそらく問題は解決されます。の代わりに {data: } をdataService返し、バインドしてみてください。modeldatamodel.datadata

これはテストされていませんが、角度がどのように機能するかを知っていることに基づいて機能するはずです。

于 2013-04-01T02:57:11.450 に答える