javascript - AngularJS watch 没有被触发

Question

我在使用 AngularJs 时遇到问题。我创建了一个指令 $watch 模型，并根据模型的当前状态采取一些操作。然而，虽然在调试过程中我可以看到 $watch 已设置，但它仅在模型至少有效一次后才会被触发，我不知道为什么会发生这种情况。当键入内容时，调试它甚至不会进入 $watch 函数。

代码如下:

指令:

(function() {
    'use strict';

    var app = angular.module('app');

    app.directive('tooltipValidation', function () {


        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {

                var tooltip = $(element).qtip({
                    content: {
                        text: element.next('div')
                    },
                    show: false,
                    hide: true
                }).qtip('api');

                scope.$watch(attrs.ngModel, function() {
                    if (ngModel.$invalid && ngModel.$dirty) {
                        tooltip.show();
                    } else {
                        tooltip.hide();
                    }
                });
            }
        };
    });
})()

HTML:

<div class="form-address clearfix" ng-show="isNewShippingAddress" ng-form="newShippingAddressForm">                                    
    <h3>Include new shipping address:</h3>
    <div class="novo-endereco clearfix" id="newAddress">
        <div class="required address apelido">
            <label for="newShippingAddressAlias">Alias</label>
            <input id="newShippingAddressAlias" name="newShippingAddressAlias" type="text" tooltip-validation ng-model="newShippingAddress.Alias" required ng-maxlength="32" />
            <div data-ng-show="newShippingAddressForm.newShippingAddressAlias.$dirty && newShippingAddressForm.newShippingAddressAlias.$invalid">
                <p data-ng-show="newShippingAddressForm.newShippingAddressAlias.$error.required">obligatory</p>
                <p data-ng-show="newShippingAddressForm.newShippingAddressAlias.$error.maxlength">max 32 char</p>
            </div>
        </div>
        <div class="required endereco">
            <label for="newShippingAddressStreet">Street</label>
            <input id="newShippingAddressStreet" name="newShippingAddressStreet" type="text" tooltip-validation ng-model="newShippingAddress.Street" required ng-maxlength="256" />
            <div data-ng-show="newShippingAddressForm.newShippingAddressStreet.$dirty && newShippingAddressForm.newShippingAddressStreet.$invalid">
                <p data-ng-show="newShippingAddressForm.newShippingAddressStreet.$error.required">obligatory</p>
                <p data-ng-show="newShippingAddressForm.newShippingAddressStreet.$error.maxlength">max 256 char</p>
            </div>
        </div>
        <div class="required cep">
            <label for="newShippingAddressZipCode">ZipCode</label>
            <input id="newShippingAddressZipCode" name="newShippingAddressZipCode" type="text" tooltip-validation ng-model="newShippingAddress.ZipCode" required ng-pattern="/^[0-9]{8}$/" />
            <div data-ng-show="newShippingAddressForm.newShippingAddressZipCode.$dirty && newShippingAddressForm.newShippingAddressZipCode.$invalid">
                <p data-ng-show="newShippingAddressForm.newShippingAddressZipCode.$error.required">obligatory</p>
                <p data-ng-show="newShippingAddressForm.newShippingAddressZipCode.$error.pattern">8 digits</p>
            </div>
        </div>
        <input type="submit" class="button grey" value="Save new address" data-ng-click="saveShippingAddress()" ng-disabled="newShippingAddressForm.$invalid" />
    </div>
</div>

问候，

迪梅洛

Answer 1

尝试:

scope.$watch(function(){
            return ngModel.$viewValue; //Watch for view value (the value in your input)
          }, function() {
           if (ngModel.$invalid && ngModel.$dirty) {
                 tooltip.show();
           } else {
                 tooltip.hide();
           }
   });

DEMO

说明:

当您使用 ng-model 在输入中输入无效值时，底层模型不会更新，导致您的 scope.$watch(attrs. ngModel 不会被触发，因为您正在观察模型中的更改。如果您需要在每次输入更改时触发该函数，无论输入是否有效，请尝试上述解决方案。