如何使用使用onDrag回调的双向数据绑定使更改在角中保持不变？

Question

我试图更新一个span的文本后，回调函数的角度。

以下是我的HTML：

    <div ng-controller="onDragController">
         <div id="draggableArea">
        <div id="rectangle1" data-drag="true" jqyoui-draggable="{onDrag: 'dragCallback'}" data-jqyoui-options="{containment: '#draggableArea'}"></div>
    </div>


    <div>
        <span ng-model="rectangleOne">{{rectangleOne.leftOffset}}</span>
    </div>

</div>

我的控制器是：

var App = angular.module('drag-and-drop', ['ngDragDrop', 'ui.bootstrap']);

App.controller('onDragController', function($scope) {

    $scope.rectangleOne = {};

    $scope.rectangleOne.leftOffset = 'ASDF';

    $scope.dragCallback = function (event, ui) {

        $scope.rectangleOne = {leftOffset: '12345'};            

    };

});

如果在回调函数中抛出警报，则会看到leftOffSet已被更新，但在我的HTML页面上{rectangleOne.leftOffset}保持不变。

我错过了什么.？

Answer 1

在$apply中使用dragCallback，如下所示：

$scope.dragCallback = function(event, ui) {
    $scope.$apply(function() {
        $scope.rectangleOne = {
            leftOffset: '12345'
        };
    });
};

这将更新作用域中的leftOffset。这是一个柱塞。

Answer 2

它可能有助于更好地理解角如何进行双向数据绑定。这篇关于如何应用工作的博客文章，以及人们为什么要使用它的原因，都是很好的。

概括地说，对于您对$scope.rectangleOne**:**的更改，

每次您做这样的简单更改时，都可以调用$scope.$digest()。你需要这样做，这样角质知道你的绑定数据是否被更新了。

或者，您可以使用$scope.$apply，在对$apply的回调中对$scope.rectangleOne进行更改。它也是这样做的，$apply最终间接地调用了$digest()。

代码：

$scope.$apply(function() {
    $scope.rectangleOne.leftOffset = '12345';
});

希望这有助于解决你的问题，并增加一些理解，正在发生的幕后！