升級角的消息影響我的佈局

但經過我升級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>

可能是什麼原因？任何人都可以建議嗎？謝謝。

來源

2015-09-27 Zhou Hao

如果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>

參考

來源

2016-09-10 01:20:42

升級角的消息影響我的佈局

回答

相關問題