閃爍與ngMessages和ngShow

Question

在一個形式required -validation和ng-messages我用ng-show隱藏在啓動指令，並只顯示錯誤信息輸入了ng-dirty後。

繼續保持不動的元素填充它在佈局的空間，我有如下的CSS規則覆蓋默認ng-hide行爲：

ng-messages.ng-hide:not(.ng-hide-animate), [ng-messages].ng-hide:not(.ng-hide-animate) 
{ 
    display: block !important; 
    visibility: hidden; 
} 

現在當我輸入的輸入字段中的文本錯誤信息是前不久可見然後再次隱藏（由於所需的字段被填充）。它以某種方式感覺在表單驗證完成之前已解決ng-dirty，導致此行爲。

見this Fiddle

或退房

代碼：

var $scope; 
 
var app = angular.module('myapp', ['ngMessages', 'ngAnimate']); 
 
app.controller('UserCtrl', ['$scope', UserCtrl]); 
 

 
function UserCtrl($scope) { 
 
    $scope.showField = true; 
 
    $scope.reset = function() { 
 
     var master = { name: '' }; 
 
     $scope.temp = angular.copy(master); 
 
     $scope.user_form.$setPristine(); 
 
    } 
 
}

ng-messages.ng-hide:not(.ng-hide-animate), [ng-messages].ng-hide:not(.ng-hide-animate) 
 
{ 
 
    display: block !important; 
 
    visibility: hidden; 
 
} 
 

 
ng-messages, [ng-messages] 
 
{ 
 
    display: block; 
 
    height: 1em; 
 
} 
 

 
input 
 
{ 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.5/angular-messages.min.js"></script> 
 

 
<div ng-app="myapp"> 
 
    <div ng-controller="UserCtrl"> 
 
     <form name="user_form" novalidate> 
 
      <input name="name" ng-model="temp.name" ng-show="showField" placeholder="Name" required autocomplete="off"/> 
 
      <ng-messages ng-show="user_form.name.$dirty" for="user_form.name.$error"> 
 
       <ng-message when="required"> 
 
       Please enter your name 
 
       </ng-message> 
 
      </ng-messages> 
 
      <button type="button" class="button" ng-click="reset()">Reset</button>  
 
     </form> 
 
     <p> 
 
      Pristine: {{user_form.$pristine}} 
 
     </p> 
 
     
 
     <pre>Errors: {{user_form.$error | json}}</pre> 
 
       
 
    </div> 
 
</div>

Answer 1

<ng-messages ng-show="user_form.name.$dirty && !user_form.name.$valid" for="user_form.name.$error">