在 AngularJS 指令中动态更新 ion.rangeSlider ngModel

Question

我试图在 Ion.RangeSlider 的绑定 ng-model 范围变量发生变化时更新它的值。使用 Ion.RangeSlider 时模型会更新，反之亦然。具有相同 ng-model 的其他输入会在模型值更改时更新，因此这一定是一些特殊情况。

编辑：哇！这是一个片段 @lin :) 还有 jsfiddle.

var app = angular.module('ngModelIonRangeSliderDemo', []);

app.controller('MainCtrl', function ($scope, $rootScope, $timeout) {
    
    $scope.someNumber = 10;
    
}).directive('ionRangeSlider', function ionRangeSlider() {
   return {
      restrict: 'A',
      scope: {
         rangeOptions: '=',
         model: '=ngModel'
      },
      link: function (scope, elem, attrs) {
         scope.$watch('model',function () {
            elem.ionRangeSlider(scope.rangeOptions);
         });
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinFlat.min.css" />

<div ng-app="ngModelIonRangeSliderDemo">
    <div ng-controller="MainCtrl" class="wrapper">
       <h3>Text input updates slider, but not vice-versa.</h3>
       <input ion-range-slider ng-model="someNumber" range-options="{min: -100, max: 100, step: .001}">
       <br/>
       <input type="text" ng-model="someNumber" class="form-control">
    </div>
</div>

我在十多个有点相关的堆栈溢出 post 中尝试了各种建议（这就是我在 ngModel 上设置当前 scope.$watch 方案的方式），但是 none 有效。我的控制台中没有任何错误。怎么了？另外，为什么在我的指令中没有提到模型它就不能工作？请让我知道是否有任何重要内容我未能包含在此 post.

Answer 1

只需在指令中使用 slider.update() 就可以了：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope, $rootScope, $timeout) {

    $scope.someNumber = 15;
    $scope.apply = false;

}).directive('ionRangeSlider', function ionRangeSlider() {
   return {
      restrict: 'A',
      scope: {
         rangeOptions: '=',
         model: '=ngModel',
         apply: '=apply'
      },
      link: function (scope, elem, attrs) {
         elem.ionRangeSlider(scope.rangeOptions);
         scope.$watch('apply',function () {
          if (scope.apply) {
            scope.apply = false;
            var slider = elem.data("ionRangeSlider");            
            slider.update({
               from: scope.model
            });
          }
         });
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinFlat.min.css" />

<div ng-app="myApp" ng-controller="MainCtrl" class="wrapper">
  <h3>Text input updates slider and vice-versa.</h3>
  <input ion-range-slider ng-model="someNumber" apply="apply" range-options="{min: -100, max: 100, step: .001}">
  <br/>
  <input type="text" ng-model="someNumber" class="form-control" ng-change="apply = true">
</div>

Answer 2

额外演示，如何将 ion.rangeSlider 绑定到输入：

http://jsfiddle.net/IonDen/r5aox84v/

var $range = $(".js-range-slider"),
    $inputFrom = $(".js-input-from"),
    $inputTo = $(".js-input-to"),
    instance,
    min = 0,
    max = 1000,
    from = 0,
    to = 0;

$range.ionRangeSlider({
    type: "double",
    min: min,
    max: max,
    from: 200,
    to: 800,
    onStart: updateInputs,
    onChange: updateInputs
});
instance = $range.data("ionRangeSlider");

function updateInputs (data) {
    from = data.from;
    to = data.to;

    $inputFrom.prop("value", from);
    $inputTo.prop("value", to); 
}

$inputFrom.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < min) {
        val = min;
    } else if (val > to) {
        val = to;
    }

    instance.update({
        from: val
    });
});

$inputTo.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < from) {
        val = from;
    } else if (val > max) {
        val = max;
    }

    instance.update({
        to: val
    });
});

在 AngularJS 指令中动态更新 ion.rangeSlider ngModel

Dynamically update ion.rangeSlider ngModel in AngularJS directive

data-binding

directive

angularjs

angular-ngmodel

ion-range-slider