Question

我最近开始在Web应用程序中使用AngularJS，到目前为止，它主要是基于jQuery的。此应用程序中的一个UI组件使用jQuery UI的draggable，它使用CSS的left属性在被拖动时定位对象。我遇到的问题是我将left绑定到范围属性中保存的百分比值。

<div class="seeker" data-ng-style="{ left: position + '%' }">
    <div class="handle"></div>
</div>

我认为听取拖动stop事件并自己进行转换会很简单。这在大多数情况下都可以正常工作，但是尽管已将containment字段设置为可拖动元素的父元素（.timeline-control），但有时可拖动元素稍微超出其父元素。以下代码可以补偿这些情况。

link: function (scope, elem, attrs) {
    elem.find(".seeker").draggable({
        axis: "x",
        containment: elem.find(".timeline-control"),
        stop: function (event, ui) {
            var $t = $(event.target);
            var position = $t.position().left / $t.parent().outerWidth() * 100;
            position = Math.min(position, 100);
            position = Math.max(position, 0);
            scope.$apply(function () {
                scope.position = position;
            });
        }
    });
}

此代码的问题在于，如果将可拖动元素拖到父级最右侧之外，则scope.position绑定仅在第一次设置为100时更新。连续拖动时不会发生绑定。我意识到这是因为scope.position值实际上没有改变，并且框架不认为是脏的，但是元素样式有变化，所以我希望无论如何都要进行绑定。

修改

Here是一名证明行为的掠夺者。将红色条拖动到容器的最右侧并释放它。此时它按预期工作。将它向右拖动并再次释放，你会看到红色条打破了包容（jqueryui可拖动的bug？）。重复以查看行为。

研究jQuery draggable不能保持遏制的问题导致我this问题。

我可以想到一些使用这种方法的hackish方法，但我希望有一个干净的解决方案，就像明确标记属性一样。有什么想法吗？

Answer 1

先生，你让我头疼。我知道你正在寻找一种非hackish解决方案，但这些是我提出的两个选择。尽管他们很苛刻，我还是愿意分享它们，以防它们吸引你。

1）应用次要范围更改，然后立即将其重新设置

scope.$apply(function () {
    scope.position = position - .00000001;
});
scope.$apply(function () {
    scope.position = position;
});

2）而不是绑定你的scope.position通过jQuery显式设置左样式：

elem.css('left', position + '%');

明确地将指令范围上的属性标记为脏

修改

1 个答案: