未定义ng-model时不会触发$ scope。$ watch吗？

Question

问题：

---

我试图在具有严格属性（例如max ， min ， maxlength和step的数字输入中使用的ng模型上使用$scope.$watch方法。

当输入中插入的值超过这些属性中的任何一个时，ng-model检索undefined 。

因此，最终发生的事情是：每次我们更改输入值时，都会触发$scope.$watch 。 一旦值未定义，则只有在插入的值再次有效时（换句话说，遵循属性规则（最大，最小，最大长度和步长）），才会再次触发该值。

---

例如

用户输入： -2,4-> $scope.$watch被触发，并输出newValue为undefined 。

用户添加一个新数字： -2,44-> $scope.$watch不再触发，这种方式。

---

main.js

---

$scope.$watch("user.input.base.sphere", function(newValue, oldValue) {
console.log(newValue);
}

---

** index.html

---

<input
ng-cloak
type="number"
ng-class="user.settings.input.sphere.class"
autocomplete="off"
required     
name="sphere"
id="in-sphere"
title="Sphere"
step="{{user.filter.sphere.step}}"
min="{{user.filter.sphere.min}}"
max="{{user.filter.sphere.max}}"
maxlength="{{user.filter.sphere.maxlength}}"
placeholder="{{user.filter.sphere.placeholder}}"
ng-model="user.input.base.sphere" 
select-on-click
sphere>

---

问题：即使在未定义的ng-model我如何仍可以让$scope.$watch触发

Answer 1

您可以将以下功能附加到ng-keyup指令。 该函数将获取对表单控件的引用，并读取用户键入的值，即使模型中的值尚未更新。

$scope.changeHandler = function (a) {
  var element = angular.element(document.querySelector('#in-sphere'))[0];
  console.log(element.value);
}

将此附加到您的表单控件： ng-keyup='changeHandler()'

这是一个工作的家伙