css - 升级 Angular 消息会影响我的布局

Question

这是我的登录表单的屏幕截图:

但是在我将angular-message升级到1.4及以上版本后，布局变为:

我的源代码:

<ion-view view-title="Login">
    <ion-header-bar class="bar-calm">
      <h1 class="title">Login</h1>
    </ion-header-bar>

    <ion-content class="padding">
        <form name="signinForm" novalidate="">
            <div style="line-height: 250px; background-color: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; text-align: center; width: 100%; height: auto;">
                <i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
            </div>
            <div class="list">
                <label class="item item-input"
                    ng-class="{'has-error' : signinForm.email.$invalid && signinForm.email.$dirty,
                    'valid-lr' : signinForm.email.$valid  && signinForm.email.$dirty}">
                    <span class="input-label">Email</span>
                    <input type="email" 
                        name="email"
                        placeholder="Email" 
                        ng-model="data.email" 
                        required>
                </label>
                <div class="form-errors" 
                  ng-show="signinForm.email.$error && signinForm.email.$dirty"
                  ng-messages="signinForm.email.$error" 
                  ng-messages-include="templates/form-errors.html">
                </div> 

                <label class="item item-input"
                    ng-class="{'has-error-lr' : signinForm.password.$invalid  && signinForm.$submitted, 'valid-lr' : signinForm.password.$valid  && signinForm.$submitted}">
                    <span class="input-label">Password</span>
                    <input type="password" 
                        name="password"
                        placeholder="Password" 
                        ng-model="data.password"
                        ng-minlength="5">
                </label>
                <div class="form-errors" 
                   ng-show="signinForm.password.$error && signinForm.password.$dirty"
                   ng-messages="signinForm.password.$error"
                   ng-messages-include="templates/form-errors.html">
                </div>

            </div>
            <div class="spacer" style="height: 0px;"></div>
            <button class="button button-calm button-block icon-left ion-android-social-user" ng-click="login()" ng-disabled="signinForm.$invalid">Login</button>
            <a href="#/signup" class="button button-positive button-clear button-block ">Not a memeber? Create an account</a>
       </form>
    </ion-content>
</ion-view>

可能是什么原因？有人可以建议吗？谢谢。

Answer 1

如果ng-message指令嵌套在 ng-messages 中指令，这应该工作。否则，不能保证在同一个元素上工作。 Angular 1.2.18+ 之后的版本没有区别。例如:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required">👯</div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

相比于:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required">👯</div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

引用资料

• ionic Issue #6040: Please provide option to validate form elements like <ion-input> , <ion-select> , <ion-textarea>

• AngularJS Repo: ngmessage Issues