7

ドラッグ可能なjqueryuiのディレクティブを作成していますが、ドラッグ後に左右の位置をスコープにバインドするのに問題があります。誰かが私を正しい方向に向けることができますか？

myApp.directive('draggable', function () {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        element.draggable({
            cursor: "move",
            stop: function (event, ui) {
                attrs.$set('xpos', ui.position.left);
            }
        });
    }
};
});

これが私がやろうとしていることのフィドルです：http： //jsfiddle.net/psinke/TmQ​​eL /

4

2 に答える 2

5

ディレクティブに追加します。

scope: { xpos: '=', ypos: '=' },

'='構文は、分離スコープと親スコープの間に双方向のデータバインディングを設定します。ディレクティブでこれらの分離スコープのプロパティに加えた変更は、親スコープにも影響します。その逆も同様です。

次に、リンク機能で：

stop: function (event, ui) {
  scope.xpos = ui.position.left;
  scope.ypos = ui.position.top;
  scope.$apply();
  scope.$apply();
}

現在、Angularにはバグがあり、=でバインドされた分離スコーププロパティに属性を設定している場合、$ apply（）を2回呼び出す必要があります。https://github.com/angular/angular.js/issues/1276を参照してください

更新： @Peterはコメントで、上記は入力テキストボックスを介してドラッグ可能なものを移動するのに失敗することを指摘しました。分離スコープで動作させることができなかったので、ディレクティブに親スコープを使用させました（つまり、ディレクティブは新しいスコープを作成しません）。attrsを使用して、stop（）メソッドで指定されたスコープ属性を変更しました。これは、同じページ上の複数のドラッグ可能オブジェクトで機能します。

stop: function (event, ui) {
   scope[attrs.xpos] = ui.position.left;
   scope[attrs.ypos] = ui.position.top;
   scope.$apply();
}

フィドル。

于 2013-01-08T16:17:19.033 に答える
0

これは初心者が直面する一般的な問題です。

次のコードを追加します。それが動作します。

 stop: function (event, ui) {
      scope.divleft = ui.position.left;
      scope.divtop = ui.position.top;
      scope.$apply();
  }

理由：jqueryの世界で変更が発生するたびに、$scope。$apply（）を呼び出してAngularJSの世界に変更を伝達する必要があります。

于 2013-01-08T15:41:53.900 に答える