jquery-ui - $scope.slider - 未更新

Question

我有一个 jquery-ui slider ，它使用 slider 的值更新文本框。

文本框具有 ng-model，因此我可以从 Controller 获取值 - 但移动 slider 后该值不会更新(该值在文本框中视觉上发生变化，但 $scope.slider 保持不变)。

如果我在文本框中手动更改值，一切都会按预期工作，并且 $scope.slider 的值将更新为新值。

有没有办法让 slider 也更新范围的值？

   <input type="text" id="rent"  ng-model="rent" style="border: 0; color: #f6931f; font-weight: bold;" />
  <div id="slider-rent" style="width: 80%;"></div>

  $("#slider-rent").slider({
        range: false,
        min: 0,
        max: 20000,
        step: 10,
        value: 0,
        slide: function (event, ui) {
            $("#rent").val(ui.value);
        }
    });
    $("#rent").val($("#slider-rent").slider("value"));
    $("#rent").change(function () {

        $("#slider-rent").slider("value", $("#rent").val());
    });

(这是一个 RTL slider ，这就是值为负数的原因)

Answer 1

最好将 slider 代码放入 Angular 指令中，以便您可以访问 Controller 范围。

但是，如果您在输入元素上触发输入事件，它将更新 Angular 模型

function updateInputValue( newVal){
     $("#rent").val(newVal).trigger('input');    
}

$(function () {
    $("#slider-rent").slider({
        range: false,
        min: 0,
        max: 20000,
        step: 10,
        value: 0,
        slide: function (event, ui) {
            updateInputValue(ui.value);
        }
    });
    updateInputValue($("#slider-rent").slider("value"));
    $("#rent").change(function () {
        $("#slider-rent").slider("value", $("#rent").val());
    });
})

演示:http://jsfiddle.net/zwHQs/