2

我想创建一个带有输入字段的范围滑块来直接输入值（如在 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
        }
    }
}]);

好吧，当我更改数字输入的值时，这很有效。滑块移动并且值属性都被更新。只要我直接移动滑块，两个值属性都会更新，但我的数字输入文本会以某种方式被清除并设置为最小值。

我在模板中或数据绑定中犯了一些错误吗？

4

1 回答 1

2

解决了，根据这个关于同一问题的答案：

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

总结：似乎HTML5范围输入返回的不是数字而是字符串。将此字符串分配给数字输入会导致其自身清除，因为，谁会想到，它会期望一个数字......

作为解决方案，我们只需要将返回的字符串值转换为数字。我用 parseFloat() 例如：

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

这个逻辑可以插入到链接函数中。完毕。

不是很好，但很容易解决。

于 2014-09-26T08:59:09.980 回答