Question

我正在尝试在Angular中的回调函数之后更新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。这是Plunker。

Answer 2

更好地了解Angular如何进行双向数据绑定可能会有所帮助。这篇关于how apply works的博客文章以及为什么人们会有动力使用它，这是非常好的。

总之，对$scope.rectangleOne的更改

每次进行这样的简单更改时，您都可以致电$scope.$digest()。您需要这样做，以便Angular知道检查您的绑定数据是否已更新。

或者，您可以使用$ scope。$ apply，在回调$scope.rectangleOne内对$apply进行更改。它正在做同样的事情，$apply最终间接调用$digest()。

在代码中：

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

希望这有助于解决您的问题，并对幕后发生的事情增加一点了解！

如何使用带有onDrag回调的双向数据绑定将我的更改保留在Angular中？

2 个答案: