Question

我对AngularJs有疑问。我创建了一个指令，用于观察模型，并根据模型的当前状态采取一些操作。但是，虽然在调试过程中我可以看到$ 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>

此致

dimello

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未被解雇，因为您和＃39;重新观察模型的变化。如果您需要在每次输入更改时触发该功能，无论它是否有效，请尝试上述解决方案。

AngularJS手表未被触发

1 个答案: