在angularJS指令中具有相同ng-model的多個輸入元素

Question

我想創建一個帶輸入字段的範圍滑塊來直接輸入值（如jQM：http://demos.jquerymobile.com/1.4.4/slider/）。

我的指令是這樣的：

app.directive("mySlider", [function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      id: "@?", 
      min: "@", 
      max: "@", 
      step: "@?", 
      value: "=ngModel" 
     }, 
     template: "" + 
      "<div class='my-sliderWrap'>" + 
       "<input type='number' min={{min}} max={{max}} step={{step}} value={{value}} ng-model=value>" + 
       "<input type='range' min={{min}} max={{max}} step={{step}} value={{value}} ng-model=value>" + 
      "</div>", 
     link: function ($scope, $element, $attrs) { 

      //some logic here 
     } 
    } 
}]); 

好了，這時候我換號的輸入值工作良好。滑塊移動並且值屬性都被更新。只要我直接移動滑塊，兩個值屬性仍會更新，但我的號碼輸入的文本會以某種方式被清除並設置爲最小值。

我在模板或數據綁定中犯了一些錯誤嗎？

Answer 1

解決了，按照這個答案對同一問題：

https://stackoverflow.com/a/24808152/2577116

小結：看來，HTML5範圍輸入不返回了號碼，但一個字符串。將此字符串分配給數字輸入會導致相同的字符清除自己，因爲，誰會想到這一點，它會得到一個數字...

作爲解決方案，我們只需要將返回的字符串值轉換爲數字。我用parseFloat（）做例子：

$scope.$watch('value',function(newValue) { 
    $scope.value = parseFloat(newValue); //or Number(newValue); or parseInt(newValue); 
}); 

這個邏輯只能被插入到鏈接函數中。完成。

不是很好，但容易的解決方法。