ng-repeatを使用してドラッグした後のAngularjsディレクティブアトリビュートのバインド

Question

私はAngularを初めて使用しており、エレメント上の位置をユーザがドラッグした後にモデルにバインドするディレクティブを作成しようとしています。私は、単純なオブジェクトのためにこれを解決し、別のスタックオーバーフローの問題が見つかりました：ここ

Angularjs directive attribute binding of left and top position after dragging

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

参照フィドル・ソリューション：http://jsfiddle.net/mrajcok/5Mzda/

は今、私は今、これはよりで動作するように取得しようとしています複雑なオブジェクトとng-repeatと一緒に使用していますが、なぜ機能していないのかわかりません。ここで

は私のHTMLです：

<div ng-controller="MyCtrl"> 
    <div ng-repeat="position in positions"> 
     <input type="number" ng-model="position.divleft"/> 
     <input type="number" ng-model="position.divtop"/> 
     <p draggable class="example" ng-style="{left: position.divleft, top: position.divtop}" xpos="position.divleft" ypos="position.divtop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
</div> 

そして、ここでは、JSです：ここでは

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

function MyCtrl($scope) { 
    $scope.positions = [ 
     {"divtop": 80, 
     "divleft": 200 
     }, 
     {"divtop": 100, 
     "divleft": 250 
     } 
    ]; 
}; 

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

はフィドルです：

http://jsfiddle.net/5Mzda/19/

私が見るように見えることはできませんコードに何が問題なのですか？助けていただければ幸いです！

UPDATE

は、私は元の質問に、より密接にコメントを読んで、それが$eval作品使用して次のようになります。

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

そこにこれを行うには、よりエレガントな方法だが、それが表示された場合はわからないがバインディングが正しく動作しています！

Answer 1

これは正常です。

角度フレームワークですべての角度関連式を実行する必要があります。イベントハンドラとメソッドの場合、イベントハンドラの外側から呼び出される場合は、$applyを使用して角で実行する必要があります。これにより式が実行され、次に$digestが呼び出され、接続された時計が呼び出されます。これは便利だった、Fiddle