AngularJS监视未触发

Question

I'm having a problem with AngularJs. I have created a directive that $watch the model and it takes some action based on the model's current status. However, although during debugging I can see that the $watch is set, it is only being triggered after the model get valid at least once and I don't know why that is happening. Debugging it doesn't even gets into the $watch function when something is typed.

The code is below:

Directive:

(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>

Regards,

dimello

Answer 1

Try:

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

Explanation :

When you type an invalid value into the input with ng-model, the underlying model is not updated , causing your scope.$watch(attrs.ngModel not being fired because you're watching for changes in the model. If you need to fire the function every time the input changes no matter it's valid or not, try the above solution.