Question

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

案例1：

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

案例2（与案例1的区别在于我用AngularJS范围变量替换了55）：

<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。然后在第一个例子中，范围滑块中的点设置为-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和{{1}旁边的模板中设置此值值。事实并非如此。对此的典型解决方法是在使用max设置min和max值后设置模型值。它并不理想但它有效。

控制器功能

$timeout

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

如果需要，您可以编写一个简单的指令来基本上触发function($timeout) { var vc = this // vc.rangeInput = -10; vc.rangeInputMin = -55; vc.rangeInputMax = 55; $timeout(function(){ vc.rangeInput = -10; }) } - 就像下一个$ digest周期中的功能一样。如果您在设计中遇到过两次以上的问题，这可能是一个更好的解决方案。

callLater指令

ng-init

模板中的

指令

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

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

Answer 2

问题在这里评论：https://github.com/driftyco/ionic/issues/1948

JWGmeligMeyling created ngMax和ngMin指令，它们看起来效果很好：

.directive('ngMin', function() {
  return {
    restrict : 'A',
    require : ['ngModel'],
    compile: function($element, $attr) {
      return function linkDateTimeSelect(scope, element, attrs, controllers) {
        var ngModelController = controllers[0];
        scope.$watch($attr.ngMin, function watchNgMin(value) {
          element.attr('min', value);
          ngModelController.$render();
        })
      }
    }
  }
})
.directive('ngMax', function() {
  return {
    restrict : 'A',
    require : ['ngModel'],
    compile: function($element, $attr) {
      return function linkDateTimeSelect(scope, element, attrs, controllers) {
        var ngModelController = controllers[0];
        scope.$watch($attr.ngMax, function watchNgMax(value) {
          element.attr('max', value);
          ngModelController.$render();
        })
      }
    }
  }
})

以下是codepen：http://codepen.io/anon/pen/MKzezB

Answer 3

尝试从标记中删除value =“value.rangeInput”。

输入类型范围min属性中的AngularJS表示法

3 个答案: