NoUiSlider Был уже инициализирован

Question

Я пытаюсь использовать noUiSlider с угловым JS, у меня есть директива, которая содержит 4 ползунка, и я хочу отобразить эту директиву на 2 страницах. Когда я меняю страницу, я получил ошибку: Ошибка: слайдер уже был инициализирован.

Я не имею эту ошибку, если я обновить мою страницу, но это не значит, что я хочу :)

Я вижу «решение», которые состоят изменить непосредственно код noUiSlider.js, но я не» т хочет сделать это

   var familyLevel = document.getElementById('family-level'); 
       var moneyLevel = document.getElementById('money-level'); 
       var securityLevel = document.getElementById('security-level'); 
       var hobbiesLevel = document.getElementById('hobbies-level'); 
         service.initSliders(scope); 
         if(Number.isInteger(scope.owner)) 
         { 
          priorities.getPriorities(scope.owner).then(function(data){ 
           console.log(data); 
           if(angular.isObject(data)){ 
            angular.forEach(scope.model.priorities, function(value, key){ 
             if(data[key]) scope.model.priorities[key] = data[key]; 
            }); 
            service.initSliderValues(scope); 
           } 
          }).catch(function(error){ 
           console.error(error); 
          }); 
         } 
         else{ 
          appAuth.currentUser().then(function(user) { 
           priorities.getPriorities(user.id).then(function(data){ 
            if(angular.isObject(data)){ 
             angular.forEach(scope.model.priorities, function(value, key){ 
              if(data[key]) scope.model.priorities[key] = data[key]; 
             }); 
             service.initSliderValues(scope); 
            } 
           }); 
          }); 
         } 

        }, 
        initSliderValues: function(scope){ 

         familyLevel.noUiSlider.set(scope.model.priorities.family); 
         familyLevel.noUiSlider.on('set', function (val, hand) { 
          familyLevel.setAttribute("data-level", val[hand]); 
          scope.model.priorities.family = val[hand]; 
         }); 

         moneyLevel.noUiSlider.set(scope.model.priorities.money); 
         moneyLevel.noUiSlider.on('set', function (val, hand) { 
          moneyLevel.setAttribute("data-level", val[hand]); 
          scope.model.priorities.money = val[hand]; 
         }); 

         securityLevel.noUiSlider.set(scope.model.priorities.security); 
         securityLevel.noUiSlider.on('set', function (val, hand) { 
          securityLevel.setAttribute("data-level", val[hand]); 
          scope.model.priorities.security = val[hand]; 
         }); 

         hobbiesLevel.noUiSlider.set(scope.model.priorities.hobbies); 
         hobbiesLevel.noUiSlider.on('set', function (val, hand) { 
          hobbiesLevel.setAttribute("data-level", val[hand]); 
          scope.model.priorities.hobbies = val[hand]; 
         }); 

        }, 
        initSliders: function (scope) { 

          var sliders = $('.slider-range'); 

          for (var i = 0; i < sliders.length; i++) { 
           try{ 
            noUiSlider.create(sliders[i], { 
             start: 2, 
             step: 1, 
             connect: 'lower', 
             range: { 
              'min': 0, 
              'max': 5 
             }, 
             format: { 
              to: function (value) { 
               return value; 
              }, 
              from: function (value) { 
               return value; 
              } 
             } 
            }, true); 
           }catch(err){ 
            sliders[i].noUiSlider.destroy(); 
            service.initSliders(scope); 
           } 

          } 
          // initSlider=true; 

        } 

я был изменить свой код, чтобы добавить уничтожить в улове, я не ошибка, но значение ползунка не установлено моих данные

Answer 1

моего решения, это работа.

sliders[0].noUiSlider.set(scope.model.priorities.family); 
         sliders[0].noUiSlider.on('set', function (val, hand) { 
          sliders[0].setAttribute("data-level", val[hand]); 
          scope.model.priorities.family = val[hand]; 
         }); 

         sliders[1].noUiSlider.set(scope.model.priorities.money); 
         sliders[1].noUiSlider.on('set', function (val, hand) { 
          sliders[1].setAttribute("data-level", val[hand]); 
          scope.model.priorities.money = val[hand]; 
         }); 

         sliders[2].noUiSlider.set(scope.model.priorities.security); 
         sliders[2].noUiSlider.on('set', function (val, hand) { 
          sliders[2].setAttribute("data-level", val[hand]); 
          scope.model.priorities.security = val[hand]; 
         }); 

         sliders[3].noUiSlider.set(scope.model.priorities.hobbies); 
         sliders[3].noUiSlider.on('set', function (val, hand) { 
          sliders[3].setAttribute("data-level", val[hand]); 
          scope.model.priorities.hobbies = val[hand]; 
         }); 

Если кто-то хочет оптимизировать эту часть ...;)