闪烁与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">