Angularjs: директива не работает с плагином Jslider

Question

Сейчас я работаю над проектом, в котором мне нужно использовать JSlider-плагин jquery с Angularjs. Я попытался использовать этот плагин в директиве, и в директиве я поместил это в $ evalAsync, чтобы динамически присвоить значения Jslider после загрузки содержимого и до отображения страницы. То, как я сделал это указано ниже: -

var sliderDirective = angular.module("sliderModule",[]); 
sliderDirective.directive("slider",function(){ 
return { 
restrict: 'AE', 
replace: true, 
template: '<input id="slider" name="price" type="slider" value="{{filters.price}}">', 

link: function(scope, elem, attrs) { 

    scope.$evalAsync(function(scope){ 

      elem.slider({ 
      from: 0, 
      to: 3000, 
      step: 50, 
      smooth: true, 
      round: 0, 
      limits: false, 
      scale: ['$0','|','$500','|','$1,000','|','$1,500','|','$2,000','|','$2,500','|','$3,000+'], 
      skin: "blue", 
      onstatechange:function(value){ 
       scope.filters.price = value; 
       } 
      }) 

     }) 
     } 
    } 
    }) 

Я устанавливаю значение динамически, что в настоящее время проходит в области видимости переменной ссылки функции. Но проблема в том, что слайдер не получает эти динамические значения и показывает только один указатель со значением 0. Итак, любой, у кого есть какое-то решение этой проблемы. Кроме того, есть вероятность, что я сделал неправильный способ сделать это, поэтому, пожалуйста, сделайте меня правильным в этом случае.

Answer 1

Я рекомендую вам установить атрибут области действия директивы, чтобы что-то вроде:

scope : { 
    values: '=' 
} 

Это означает, что вы должны предоставить значение через привязку данные к директиве. Затем вы можете посмотреть values в функции связывания директивы. Как только они не будут null, вызовите функцию elem.slider. Я рекомендую не использовать evalAsync, но использовать наблюдателя как это вместо этого

Answer 2

Недавно я использовал RANGE SLIDER в angularJS.

<form> 
    <div class="choose_industry"> 
     <div class="form-group"> 
      <label class="control-label col-xs-12 col-sm-4 col-md-2 col-lg-2 " for="name">What Industry?</label> 
      <div class="col-xs-12 col-sm-8 col-md-10 col-lg-10"> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio1" value="cdl" ng-model="leg_ser.industry"> 
        <label for="radio1"> 
         Commercial Trucking Transportation 
        </label> 
       </div> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio2" value="non_cdl" ng-model="leg_ser.industry"> 
        <label for="radio2"> 
         Other Industries 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="employee_counting"> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Number of Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-user"></i></span> 
       <input type="number" class="form-control" placeholder="Employees" name="Number of Employees" ng-model="leg_ser.num_of_emp"> 
       <!-- <span>Total Number of Employees</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0</span> 
       <span class="pull-right">25k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="25000" value="0" class="slider" id="myRange" ng-model="leg_ser.num_of_emp"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Enrollment Percentage (%)?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-percent"></i></span> 
       <input type="number" class="form-control" placeholder="Percentage" name="Enrollment Percentage" ng-model="leg_ser.enroll_per"> 
       <!-- <span>Estimated Percentage that will enroll</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0%</span> 
       <span class="pull-right">100%</span> 
       <div id="slidecontainer"> 
        <input type="range" min="1" max="100" value="1" class="slider" id="myRange" ng-model="leg_ser.enroll_per"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Annual Cost per Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-dollar"></i></span> 
       <input type="number" class="form-control" placeholder="Cost" name="Annual Cost per Employees" ng-model="leg_ser.annual_cost"> 
       <!-- <span>Avarage Salary and benifits per Employee</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">$0</span> 
       <span class="pull-right">$300k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="300000" value="0" class="slider" id="myRange" ng-model="leg_ser.annual_cost"> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

Добавьте следующий код в тег сценария

<!-- RANGE SLIDER JS START --> 
<script> 
var slider = document.getElementById("myRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = slider.value; 

slider.oninput = function() { 
    output.innerHTML = this.value; 
} 
</script> 
<!-- RANGE SLIDER JS OVER --> 

Над сценарием работает хорошо для меня, должно работать для вас тоже.