Javascript 观察范围滑块值随AngularJS的变化

我通过AngularJS中的指令实现了一个jQuery滑块，它看起来像这样：

html

<div class="slider-container">
    <div slider></div>
</div>

这成功地实现了滑块，但是在elem（我的滑块）上调用方法val（）只工作一次，就在滑块实现时。我知道我需要使用某种形式的$watch，但如果指令本身没有属性（然后通过attrs访问它），我不知道如何使用它，而指令本身没有属性

本质上，我希望观察对elem.val（）的更改，并在更改时打印出值—不知道如何执行该操作

注意：这些代码都在ng开关中，我希望这不会让我的生活变得更糟

---

谢谢你的帮助

如果您只需要打印出该值，则只需处理其

change

事件：

myApp.directive('slider', function() {
    return {
        link: function(scope, elem, attrs) {

            //slider settings, .noUiSlider is the method to initialize the slider
            elem.noUiSlider({
                range: [0,1440],
                start: [690,750],
                step: 30,
                connect: true
            }).change(function(){
                 //log your value here
            });
        }
    };
});

当我们使用angular时，通常需要将值绑定到模型的属性，以符合angular数据绑定机制。为此，您需要

ng model

：

myApp.directive('slider', function() {
        return {
            require: '?ngModel',
            link: function(scope, elem, attrs,ngModel) {
                if (!ngModel) return;
                //slider settings, .noUiSlider is the method to initialize the slider
                elem.noUiSlider({
                    range: [0,1440],
                    start: [690,750],
                    step: 30,
                    connect: true
                }).change(function(){
                     scope.$apply(function () {
                        // update the underlying model's property when slider changes
                         ngModel.$setViewValue(elem.val());
                      });
                });
                ngModel.$render = function() {
                   //update the slider when the underlying model changes.
                   elem.val(ngModel.$viewValue || []);
                };
            }
        };
    });

您的html：

<div class="slider-container">
    <div slider ng-model="sliderValue"></div>
</div>

这将滑块绑定到名为

sliderValue

的模型属性，您可以$watch此属性的更改。

您的HTML

<input type="text" slider options="options">

---

在上述代码中。。值将在拖动事件中显示，无需任何额外代码。。这对我来说很好

<input type="text" slider options="options">

$scope.options = {       
             from: 2011,
             to: 2015,
             step: 1,
             dimension: " Year"
         };