javascript - 输入类型范围最小属性中的 AngularJS 表示法

Question

我希望以下表达式具有相同的结果:

案例一:

<input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min="-55" max="55">

案例 2(与案例 1 的不同之处在于我将 55 替换为 AngularJS 范围变量):

<input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min="{{value.rangeInputMin}}" max="{{value.rangeInputMax}}">

value.rangeInputMax 等于 55，value.rangeInputMin 等于 -55。

但是他们没有相同的输出。例如，假设 value.rangeInput 在这两种情况下都是 -10。然后在第一个示例中，范围 slider 中的点设置为 -10。但在第二个示例中，点设置为 0。我尝试将 value.rangeInputMin 和 value.rangeInputMax 转换为数字并将语句(不带双引号)更改为:

<input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min={{value.rangeInputMin}} max={{value.rangeInputMax}}>

我也尝试了不同的符号，例如value.rangeInputMin，“value.rangeInputMin”，试图用 ng-init 设置它，创建另一个范围变量并在这个变量中赋值，等等。

但它仍然表现出与第一种情况不同的行为。

Answer 1

根据我上面的评论，我认为您发现了一个错误，因为我希望能够以声明方式在您的模板中将此值与您的 min 和最大值 值。这根本不是这样的。一个典型的解决方法是在使用 $timeout 设置 min 和 max 值后设置模型值。这并不理想，但它确实有效。

Controller 功能

function($timeout) {
    var vc = this

    // vc.rangeInput = -10;
    vc.rangeInputMin = -55;
    vc.rangeInputMax = 55;

    $timeout(function(){
        vc.rangeInput = -10;
    })
}

你可以看到它在这里工作 - http://codepen.io/jusopi/pen/vLQKJY?editors=1010

---

如果需要，您可以编写一个简单的指令，基本上在下一个 $digest 周期触发类似于 ng-init 的功能。如果您在设计中多次遇到此问题，这可能是更好的解决方案。

callLater 指令

.directive('callLater', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            scope: {
                callLater: '&'
            },
            link: function($scope, elem, attr) {
                $timeout(function(){
                    $scope.callLater()
                })
            }
        }
    }
])

模板中的指令

<input type="range" name="myRangeInput" ng-model="vc.delayedInput"  
    min="{{vc.rangeInputMin || -55}}" max="{{vc.rangeInputMax || 55}}" 
    call-later="vc.delayedInput = -10;">

示例 - http://codepen.io/jusopi/pen/JGeKOz?editors=1010