觀看rangeSlider值我已經通過AngularJS一個指令，它看起來像這樣實施了jQuery的滑塊與AngularJS

Question

變化：

HTML

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

指令

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

這成功實現了滑塊，但調用方法val（） elem（我的滑塊）只能工作一次，當滑塊被實現時。我知道我需要使用某種形式的$手錶但我不知道如何做，沒有指令本身有一個屬性（然後通過attrs訪問它），這是不。基本上，我想觀察對elem.val（）的更改，並在更改時打印出值 - 不知道如何去做。

注意：此代碼全部在ng-switch內，我希望這不會讓我的生活變得更糟，更糟糕。

謝謝你的幫助！

Answer 1

如果你只需要打印出來的值，你可以只處理其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 
      }); 
     } 
    }; 
}); 

當我們與角工作，我們通常需要價值模型的屬性綁定到符合到角度數據綁定機制。要做到這一點，你需要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一個模型屬性，你可以看$此屬性更改。

Answer 2

你的HTML

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

後只寫在你的控制下。

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