2016-04-29 132 views
1

我想用角度JS的noUiSlider,我有一個包含4個滑塊的指令,我想在2頁上顯示這個指令。 當我改變頁面我得到一個錯誤:錯誤:滑塊已經初始化。NoUiSlider已經初始化

我沒有這個錯誤,如果我刷新我的網頁,但是這不是我想要:)

我看到一個「解決方案」誰由直接修改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; 

        } 

我不得不修改我的代碼添加摧毀抓,我沒有錯誤,但滑塊的值不設置爲我的數據

+0

這可能對你有所幫助,'滑塊總是需要在8.0.'從https://github.com/leongersen/破壞noUiSlider/issues/353 – sreeramu

+0

我已經嘗試在noUiSlider.create(...)之前添加滑塊[i] .noUiSlider.destroy(),但是我得到一個錯誤消息說不存在,如果我把destroy錯誤我的滑塊不設置我的價值 –

回答

0

我的解決方案,它的工作。

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

如果有人要優化這部分...;)

相關問題