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

这个逻辑可以插入到链接功能中。完成。

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

在angularJS指令中具有相同ng模型的多个输入元素

1 个答案: