NoUiSlider Wurde bereits initialisiert

Question

Ich versuche, NoUiSlider mit angular JS zu verwenden, ich habe eine Direktive, die 4 Schieberegler enthält, und ich möchte diese Anweisung auf 2 Seiten anzeigen. Wenn ich Seite ändere, habe ich einen Fehler: Fehler: Slider wurde bereits initialisiert.

Ich habe diesen Fehler nicht, wenn ich meine Seite zu aktualisieren, aber das ist nicht, dass ich will :)

ich eine „Lösung“ zu sehen, die direkt den Code noUiSlider.js ändern bestehen, aber ich don‘ t tun wollen, dass diese

   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; 

        } 

ich meinen Code ändern musste Fang hinzufügen zu zerstören, ich habe keine Fehler, sondern Wert des Schiebers nicht auf meine Daten

Answer 1

Meine Lösung, es ist Arbeit.

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]; 
         }); 

Wenn jemand diesen Teil optimieren wollen ...;)