將jQuery UI滑塊小部件轉換爲AngularJS指令

我正在嘗試構建一個Angular指令來創建一個鍵盤可訪問的滑塊小部件。我在Github上找到了幾個Angular滑塊，但是他們都沒有鍵盤訪問。所以，我試圖將jQuery UI滑塊轉換爲Angular指令。將jQuery UI滑塊小部件轉換爲AngularJS指令

這裏是我如何構建沒有Angular的小部件。

HTML：

<div id="slider"></slider> 
<input type="text" id="amount"/>

的Javascript：

$("#slider").slider({ 
    min: 1, 
    max: 10, 
    slide: function(event, ui) { 
    $("#amount").val(ui.value); 
    } 
});

這是我想怎麼角指令工作：

<slider min="1" max="10" ng-model="sliderValue"/> 
<input type="text" ng-model="sliderValue"/>

作爲一個例子，這裏是一個jsFiddle顯示了某人如何將jQuery UI日期小部件轉換爲Angular指令。

http://jsfiddle.net/xB6c2/121/

我想要做類似這樣的滑塊控件的東西。謝謝！

來源

2014-08-28 Rodney

這是一個有效的解決方案。感謝Duc Hong - 他的回答有助於我弄清楚這一點。請讓我知道是否有更好的方法來做到這一點。

app.directive('slider', function() { 
    return { 
     restrict: 'AE', 
     link: function(scope, element, attrs) { 
      element.slider({ 
       value: scope[attrs.ngModel], 
       min: parseInt(attrs.min), 
       max: parseInt(attrs.max), 
       step: parseFloat(attrs.step), 
       slide: function(event, ui) { 
        scope.$apply(function() { 
         scope[attrs.ngModel] = ui.value; 
        }); 
       } 
      }); 
     } 
    }; 
});

來源

2014-08-30 18:11:26 Rodney

謝謝，非常有幫助。對我來說，唯一的區別是2行'value：scope [attrs.ngModel] .price，'和'scope [attrs.ngModel] .price = ui.value;'在ng-repeat中使用。 – 2014-11-28 12:52:31

我不得不稍微修改這個指令，因爲當我試圖拖動滑塊時，出現「Uncaught TypeError：無法讀取未定義屬性'addClass'」的錯誤。原來，這是因爲我正在使用'getterSetter'函數作爲模型。我在這個要點中增加了對getterSetter函數的支持：https://gist.github.com/NoxHarmonium/d53d07bda7417d6d8004如果有人知道更好的方法，請讓我知道它似乎有點笨重。除非我使用滑塊關鍵字作爲屬性（

）語法而不是，否則我似乎無法使其起作用 – 2015-01-07 08:50:55

你可以寫爲你的UI滑動指令，它的工作原理是這樣的：

<input type="text" ng-model="setMin" /> 
<input type="text" ng-model="setMax" /> 
<slider min="setMin" max="setMax"></slider>

，你的指令將是這樣的：

app.directive("slider", function() { 
    return { 
     restrict: "AE", 
     scope:{ 
      min:"=", 
      max:"=" 
     }, 
     link: function(scope, ele, attrs) { 

      ele.slider({ 
       min: scope.min, 
       max: scope.max, 
       range: "min", 
       value: "5", 
       slide: function(event, ui) { 
        scope.$apply(function() { 
         //update on the view using ui.value; 
         //scope.number = = ui.value; 
        }); 
       } 
      }); 

      // You can watch the value min,max and then reapply your UI slider 
      scope.$watch('setMin', function(newValue, oldValue) { 
       if (newValue !== null && newValue !== undefined) { 
        // re-apply UI slider 
       } 
      }, true); 

      scope.$watch('setMax', function(newValue, oldValue) { 
       if (newValue !== null && newValue !== undefined) { 
        // re-apply UI slider 
       } 
      }, true); 

     } 
    } 
});

希望你的想法，歡呼聲

來源

2014-08-28 14:07:33

小的改進在羅德尼的解決方案：

app.directive('slider', function() { 
    return { 
     restrict: 'AE', 
     link: function(scope, element, attrs) { 
      element.slider({ 
       value: scope[attrs.ngModel], 
       min: parseInt(attrs.min), 
       max: parseInt(attrs.max), 
       step: parseFloat(attrs.step), 
       slide: function(event, ui) {      
        scope.$apply(function() {   
         scope[attrs.ngModel] = ui.value; 
        }); 
       } 
      }); 

      scope.$watch(attrs.ngModel, function(newVal, oldVal){ 
       element.slider({value: newVal}); 
      }); 
     }  
    }; 
});

它允許檢測和更新，如果模型的變化的滑塊位置。

如果您的模型包含點（例如ngmodel = "Configuration.Size"），則scope[attrs.ngModel]不再有效。解決方法是從lodash庫中使用_.get和_.set。

來源

2015-11-27 11:18:52

將jQuery UI滑塊小部件轉換爲AngularJS指令

回答

相關問題