2

我有一个基本上监视元素值的指令。

此元素的ng-maxlength属性设置为 150。当我传递 150 个字符时，$watch不再触发。此外，当我使用 ctrl + x 删除整个文本时，$watch再次不会触发。

输入元素 

<input type="text" ng-model="company.fullName" name="companyFullName" required ng-maxlength="150" ng-input-validate />

指示

enlabApp.directive('ngInputValidate', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            scope.$watch(function () { return ctrl.$modelValue; }, function (value) {
                 console.log('test');
            });
        }
    };
});

当我删除ng-maxlength指令时，问题就消失了。

4

2 回答 2

4

您正在使用ng-maxlength=150which mean angular 将对字符数进行验证，并将$modelValue相应地更新。意思是当它无效时（如果长度超过），然后你通过 do 删除该值$modelValue，然后运行消化循环，模型值再次变为，因为没有值存在并且与以前的值没有区别，并且观察者没有触发器（Watcher 将仅在变脏时触发）。undefinedctl-xundefinedmodelValue

所以使用$viewValue或element[0].value（我不会建议）。这样做：-

        scope.$watch(function () { 
          return ctrl.$viewValue; 
        }, function (value) {
          console.log('Triggered');
        });
  • $viewValue：视图中的实际字符串值。
  • $modelValue：模型中的值，控件绑定到。

请记住，使用ng-minlength仅用于验证它不会限制用户输入/粘贴更多字符，如果您想限制minlength属性是要走的路

另请注意，您不必注册手表ngModel也可以使用$viewChangeListeners，而不是创建额外的手表。

视图值更改时要执行的函数数组。它不带参数调用，它的返回值被忽略。这可以用来代替针对模型值的额外 $watches。

ctrl.$viewChangeListeners.push(function(){//... });
于 2014-08-21T17:07:35.577 回答
0

而不是$watch，您可以使用element.bind“输入”事件。喜欢看：

  element.bind "input", ->
    ctrl.$modelValue

如果你更新 ctrl，你必须使用 $scope.$apply() 来更新视图：

  element.bind "input", ->
    $scope.$apply ->
      ctrl.$modelValue

这是我使用它的示例：

link: ($scope, element, attrs, ngModelController) ->

  element.bind "focus", ->
    if not ngModelController.pristineBlur and not ngModelController.dirtyBlur
      ngModelController.pristineFocus = on
    else 
      ngModelController.dirtyFocus = on
      ngModelController.pristineBlur = off
      ngModelController.dirtyBlur = off
    ngModelController.focus = on
    updateController()

  element.bind "blur", ->
    if ngModelController.pristineFocus
      ngModelController.pristineBlur = on
      ngModelController.pristineFocus = off
    else
      ngModelController.dirtyBlur = on
      ngModelController.dirtyFocus = off
    ngModelController.focus = off
    updateController()

  element.bind "input", ->
    updateController()

  updateController = ->
    $scope.$apply ->
      ngModelController.pristineFocusOrValid = ( ngModelController.pristineFocus and ngModelController.pristineFocus or ngModelController.pristineFocus and ngModelController.$valid ) or ( ngModelController.focus and ngModelController.$valid )
      ngModelController.minlengthWarning = ( ( ngModelController.pristineBlur or ngModelController.dirtyFocus or ngModelController.dirtyBlur ) and ngModelController.$viewValue and ngModelController.$invalid ) or ngModelController.dirtyFocus and ngModelController.$invalid
      ngModelController.isRequiredError = ( ngModelController.pristineBlur or ngModelController.dirtyBlur ) and not ngModelController.focus and not ngModelController.$viewValue
于 2015-01-04T04:00:54.843 回答