2

ダーティ チェック モデルの更新で見たものとは異なるアプローチを持つ angularJS を理解しようとしました。

基本的に、要素をドラッグ可能にするディレクティブがあります。 ng-draggableこの要素のそれぞれに属性と(モデルにリンクされた要素の位置) をリンクするモデルがあり、ディレクティブでモデルを更新する必要があります。xy

そのために$apply、ディレクティブで関数を使用して、モデル値 x と y を設定しようとしました。次に、$observe関数を使用してビューを更新します。これが私の jsfiddleです。（マウスイベントをキャッチするためにファクトリを使用していることに注意してください）

        var mousemove = function(event) {
           var y = event.screenY - startY;
           var x = event.screenX - startX;
              scope.$apply(function(){
                  attr.$set('ngModel', {'x': x, 'y': y});
              });
         }

それはうまくいくようです。ただし、保存ボタンでモデル値を確認すると (コンソールにモデルが出力されます)、位置 x と y は更新されません。

だから私の質問は、どうすればそれを機能させることができるのですか? そして、より一般的には、ここで何が起こっているのでしょうか? angularJSのMVCパターンに関する読書の提案（開発者ガイドは初心者にとって少し厳しいことがわかりました）

ご協力ありがとうございました。

4

1 に答える 1

2

あなたのアプローチの問題はngModel、そのプロパティ（xおよび/またはy）の1つだけを変更するのではなく、参照全体を変更していることです。これを行うと、初期ngModel(players配列内のオブジェクト) への接続が失われ、その結果、「実際の」モデル (オブジェクトplay) への接続が失われます。

次のようにしてみてください。

scope.$apply(function() {                 
    model.$modelValue.x = event.screenX - startX;
    model.$modelValue.y = event.screenY - startY;
});

jsFiddle: http://fiddle.jshell.net/y7nVJ/

于 2013-01-30T14:49:18.150 に答える