$ scope.slider - не обновлено

Question

У меня есть слайдер 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()); 
    }); 

(Это слайдер РТЛ, поэтому значения отрицательны)

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()); 
    }); 
}) 

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

Answer 2

Попробуйте это:

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

} 

выше принимает на себя код, который вы показать, внутри/завернутый в директиву.