Question

我有一个jquery-ui滑块，用滑块的值更新文本框。

文本框有ng-model，所以我可以从控制器获取值 - 但是移动滑块后值不会更新（值在文本框内可视化，但是$ scope.slider保持不变）。

如果我在文本框中手动更改值，一切都按预期工作，$ scope.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滑块，这就是值为负的原因）

Answer 1

最好将滑块代码放入角度指令中，以便访问控制器范围。

但是，如果您在input event上触发input element，则会更新角度model

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/

Answer 2

试试这个：

slide: function (event, ui) {
    $scope.rent = ui.value;

}

以上假设您显示的代码位于/包含在指令中。

$ scope.slider - 未更新

2 个答案: