$ scope.slider - 未更新

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

该文本框具有ng模型，所以我可以从控制器获取值 - 但移动滑块后该值不会更新（该值在文本框内直观地更改，但$ 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滑块，这就是为什么值为负）

来源

2013-03-02 Doron Goldberg

你的代码在哪里？有人猜测你是如何管理滑块更新的，以及它如何与角度集成......可能需要触发输入 – charlietfl 2013-03-02 20:32:14

这将是更好地把你的滑块代码放到一个角度指令，以便您可以访问的控制范围。

但是，如果你触发了input elementinput event将更新的角度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()); 
    }); 
})

DEMO：http://jsfiddle.net/zwHQs/

来源

2013-03-02 22:06:33 charlietfl

+1上触发器（'输入'）想法的变化事件。 – 2013-03-02 22:16:23

@MarkRajcok比试图教导如何构建指令和访问范围更容易 – charlietfl 2013-03-02 22:17:05

试试这个：

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

}

上述假设你展示的代码是里面/包裹在指令中。

来源

2013-03-02 22:10:01

$ scope.slider - 未更新

回答

相关问题