1

同じコントローラーによって制御される2つのdivを作成すると、Angularのコントローラーがビューの更新を停止しているように見えます。

これを実証するために、必要最低限​​の例をまとめました。ここでサンプルをJSFiddleで表示するのが最も簡単ですが、以下のコードも投稿しています。

HTML

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        <form>
            <input type="text" ng-model="search.query"></input>
            <button ng-click="search.submit()">Submit</button>
        </form>
    </div>
    <div ng-controller="SomeOtherCtrl">
        {{sampleText}}
    </div>
    <div ng-controller="MyCtrl">
        <button ng-click="search.reset()">Reset Form</button>
    </div>
</div>

JS

var app = angular.module('App',[]);

function MyCtrl($scope)
{
    $scope.search = {
        query : 'foobar',
        submit : function() {
            this.query = 'Submitted';
            console.log(this.query);
        },
        reset : function() {
            console.log('resetting');
            this.query = '';
        }
    };
}

function SomeOtherCtrl($scope) {
    $scope.sampleText = 'other controller text';
}

送信ボタンは正常に機能しますが、[リセット]ボタンをクリックするとresetting、コンソールにログインしているのが表示されますが、ビュー（フォーム入力）が更新されません。

なんでそうなの？私が取り組んでいる現在のプロジェクトでは、間にある特定のHTMLが別のコントローラーに属しているため、これを実行する必要があります。どうすればこれを回避できますか？

4

3 に答える 3

2

角度でのコントローラー定義は、実際にはクラス/コンストラクターであり、オブジェクトではありません。コントローラーが参照されるHTMLの各場所で、コンパイルフェーズ中に、angularは定義されたコントローラークラスを使用して新しいコントローラーオブジェクトを作成します。したがって、同じコントローラークラスで複数のスコープを参照できます。

Angularのサービスについてはすでに聞いたことがあるかもしれませんが、これはまさにそれを解決するためにそれらを使用する必要がある場所です。search使用しているのは、2つのコントローラーインスタンスによって共有されている共通のオブジェクトです（クラスは同じですMyCtrlが、2つ入れることで、ng-controller="MyCtrl"Angularに2つのインスタンスを作成するように依頼したことに注意してくださいMyCtrl）。したがって、これら2つのオブジェクトは2つの異なるスコープにアクセスでき、それらが作成されると、2つの異なるスコープが2つの異なる検索オブジェクトで設定されます。[リセット]をクリックすると、他のsearchオブジェクトが呼び出されます。つまり、最初のスコープresetでは何も起こりません。MyCtrlこれが、コードが期待どおりに機能しない理由です。

ここで、Angularサービスではシングルトンであることに注意してください。したがって、複数の場所でそれらを参照すると、同じオブジェクトにアクセスできます。したがって、別のコントローラー（インスタンス）でリセットしても、同じオブジェクトはリセットされます。

これがあなたのコードで動作するプランクです。

http://plnkr.co/edit/zynAdS9hg8DUZDnlnYFm?p=preview

于 2013-03-25T10:03:33.840 に答える
0

anglejsがどのように機能するかはわかりませんが、2番目の入力<input type="text" ng-model="search.query"></input>をリセットボタンの近くに置くと、この入力が更新されます。入力は同じdivコントローラー内にある必要がありますか？それはあなたの問題を解決するのに役立ちますか？

于 2013-03-25T04:50:07.757 に答える
0

サンプルを見ると、リセットボタンのフォームタグが欠落しているようです。角度の観点から、controller = "MyCtrl"に1つの外部divを使用でき、submit（）とreset（）の2つのボタンがあるフォームがあり、外部div内にネストされたコントローラー "SomeOtherCtrl"を配置すると、完全に機能するはずです。 。

于 2017-05-29T13:13:27.993 に答える