AngularJS Ion.RangeSlider在特定按鈕更改時不會動態更新最小值和最大值

Question

我有一個滑塊指令，它使用 ionRangeSlider interanaly。在點擊按鈕時，混合和最大值被更改爲 ，但它並未在指令中更新。我在 鏈接中添加了監視功能。

下面是滑塊指令

var app = angular.module('ionSlider',[]); 
app.directive('ionslider',function($timeout){ 
return{ 
    restrict:'AE', 
    require: 'ngModel', 
    scope:{ 
    options:'=' 
    }, 
    template:'<div id="{{id}}" ></div>', 
    replace:true, 
    link:function($scope, $element, attrs, ngModel) { 
     // //function init(){ 
     var init =function(){ 
      $element.ionRangeSlider({ 
       min: $scope.options.min, 
       max: $scope.options.max, 
       type: $scope.options.type, 
       prefix: $scope.options.prefix, 
       maxPostfix: $scope.options.maxPostfix, 
       prettify: $scope.options.prettify, 
       hasGrid: $scope.options.hasGrid, 
       gridMargin: $scope.options.gridMargin, 
       postfix:$scope.options.postfix, 
       from:$scope.options.from, 
       step:$scope.options.step, 
       hideMinMax:$scope.options.hideMinMax, 
       hideFromTo:$scope.options.hideFromTo, 
       onChange:$scope.options.onChange 
      }); 
     }; 
     init(); 
     //OnChange 
    var update = function() 
     { 
     $element.ionRangeSlider ({ 
       min: $scope.options.min, 
       max: $scope.options.max, 
       type: $scope.options.type, 
       prefix: $scope.options.prefix, 
       maxPostfix: $scope.options.maxPostfix, 
       prettify: $scope.options.prettify, 
       hasGrid: $scope.options.hasGrid, 
       gridMargin: $scope.options.gridMargin, 
       postfix:$scope.options.postfix, 
       from:$scope.options.from, 
       step:$scope.options.step, 
       hideMinMax:$scope.options.hideMinMax, 
       hideFromTo:$scope.options.hideFromTo, 
       onChange:$scope.options.onChange 
     }); 

     }; 
    //watch 
     $scope.$watch('options', function(value) { 
     $timeout(function(){ update(); }); 

     }); 
    } 
    } 
}); 

對於相同的HTML代碼如下：

<td style="width:30%;" class="normal_row"><span><input ng-model="ldcInput.value" type="text" id={{key}} ionslider options="{'min':ldcInput.minValue,'max':ldcInput.maxValue,'step':ldcInput.step}" ng-change="mathCalculation(ldcInput)"/></span></td> 

爲最小和最大上述slidervalues基於按鈕的點擊改變。但它不反映在slider.Please讓我知道我在錯誤的指令。

Answer 1

由於ion.RangeSlider是由jQuery注入的，因此您無法通過再次調用注入來更新其任何屬性。

我通過添加可更新屬性和一些缺少的叉子來改進已經存在的指令，這將解決您的問題。有關如何使用它的例子，請參閱github頁面。

/** 
* Created by Abdullah on 9/19/14. 
* 
* Modified and enhanced by Juergen Wahlmann on 3/5/15 
*/ 

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


app.directive('ionslider',function($timeout){ 
return{ 
    restrict:'E', 
    scope:{min:'=', 
     max:'=', 
     type:'@', 
     prefix:'@', 
     maxPostfix:'@', 
     prettify:'@', 
     hasGrid:'@', 
     gridMargin:'@', 
     postfix:'@', 
     step:'@', 
     hideMinMax:'@', 
     hideFromTo:'@', 
     from:'=', 
     disable:'=', 
     onChange:'=', 
     onFinish:'=' 

    }, 
    template:'<div></div>', 
    replace:true, 
    link:function($scope,$element,attrs){ 
     (function init(){ 
      $($element).ionRangeSlider({ 
       min: $scope.min, 
       max: $scope.max, 
       type: $scope.type, 
       prefix: $scope.prefix, 
       maxPostfix: $scope.maxPostfix, 
       prettify: $scope.prettify, 
       hasGrid: $scope.hasGrid, 
       gridMargin: $scope.gridMargin, 
       postfix:$scope.postfix, 
       step:$scope.step, 
       hideMinMax:$scope.hideMinMax, 
       hideFromTo:$scope.hideFromTo, 
       from:$scope.from, 
       disable:$scope.disable, 
       onChange:$scope.onChange, 
       onFinish:$scope.onFinish 
      }); 
     })(); 
     $scope.$watch('min', function(value) { 
      $timeout(function(){ $($element).data("ionRangeSlider").update({min: value}); }); 
     },true); 
     $scope.$watch('max', function(value) { 
      $timeout(function(){ $($element).data("ionRangeSlider").update({max: value}); }); 
     }); 
     $scope.$watch('from', function(value) { 
      $timeout(function(){ $($element).data("ionRangeSlider").update({from: value}); }); 
     }); 
     $scope.$watch('disable', function(value) { 
      $timeout(function(){ $($element).data("ionRangeSlider").update({disable: value}); }); 
     }); 
    } 
} 
}); 

ionRangeSlider-Angular-Directive