AngularJS手錶未被觸發

我遇到了AngularJs的問題。我創建了一個指令$，觀察模型，並根據模型的當前狀態採取一些操作。但是，儘管在調試過程中我可以看到$ watch被設置，但只有在模型至少有效一次後纔會觸發，並且我不知道爲什麼會發生這種情況。當輸入內容時，調試它甚至不會進入$ watch函數。AngularJS手錶未被觸發

的代碼如下：

指令：

(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

來源

2014-03-19 dime2lo

嘗試：

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-模型的輸入，底層模型不更新，導致您scope.$watch(attrs.ngModel不是因爲你正在觀察模型的變化。如果每次輸入更改時都需要觸發該功能，無論該功能是否有效，請嘗試使用上述解決方案。

來源

2014-03-19 13:50:43

沒有工作。獲得與以前相同的結果。 – dime2lo

它工作。之前的版本（使用ngModel。$ modelValue編輯之前）無效，但新版本（使用ngModel。$ viewValue）完美運行。你的解釋是有道理的，我懷疑這是原因，但不知道如何解決。謝謝。 – dime2lo

AngularJS手錶未被觸發

回答

相關問題