Question

我的template

中有一个directive

<input ng-model="acc" type="number" required />
<p class="input-details" ng-class="{'has-error': confirm(acc, 3, 17)}"></p>

我的指令controller函数

中有这样的方法

$scope.confirm= function(value, min, max) {
  if (!value) return false;
  return ("" + value).length < min || ("" + value).length > max;
};

我的undefined方法中的值总是作为confirm传递，但是当我在输入的ng-change中调用相同的方法时，它会被传递。

<input ng-model="acc" type="number" ng-change="confirm(acc,3,17)" required />

为什么ng-class无法获得正确的ng-model值？

Answer 1

在JavaScript中，您应该有acc的范围。也使用data-ng-model而不是ng-model。

Answer 2

使用acc引用$scope变量，而不是将其注入函数。

$scope.confirm = function(min, max) {
  if (!$scope.acc) return false;
  return ("" + $scope.acc).length < min || ("" + $scope.acc).length > max;
};

Answer 3

(""+3).length = 1 || (""+17).length = 2因为类型转换，请参阅codepen例如，输入数字并查看内容（“”+ acc）。length等于以及如何修复https://codepen.io/anon/pen/vKQZoR

app.controller('classTesterCtrl', function($scope, $log){
  $scope.confirm= function(value, min, max) {
    if($scope.acc < 3 || $scope.acc  > 17){
      $scope.valid = false;
    } else {
      $scope.valid = true;
    }
  };
});


<div ng-app="modelTest">
  <div ng-controller="classTesterCtrl">
    <input ng-model="acc" type="number" ng-change="confirm()" required />
  <p class="input-details" ng-class="{'has-error': valid}"></p>
    {{(""+acc).length}}
    {{acc}}
    {{valid}}
  </div>
  </div>

ng-model没有传入has-error类

3 个答案: