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

Question

Ion.RangeSlider 当绑定ng-model范围变量更改时，我正在尝试更新an的值。该模型更新时Ion.RangeSlider被使用，而不是相反。当
模型值更改时，具有相同ng-model的其他输入也会更新，因此这必须是一些特殊情况。

编辑：呜！这是一个片段@lin :)也是

Edit: Woo! Here’s a snippet @lin :) Also
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>

我已经在十多个有点相关的堆栈溢出帖子中尝试了各种建议（这就是我在ngModel上设置当前scope.$watch方案的方式），但是没有一个起作用。我的控制台中没有任何错误。
怎么了？另外，为什么在我的指令中未提及模型却无法正常工作？如果有什么重要的事情我没能
包括在这篇文章中，请告诉我。

Answer 1

Just use slider.update() inside your directive and you will be fine:

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>