Обновление angular-сообщений влияет на мой макет

0

Вот скриншот моей формы входа:

Изображение 174551

Но после того, как я обновил angular-message до версии 1.4 и выше, макет изменится на:

Изображение 174551

Мой исходный код:

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

Что может быть причиной? Может кто-нибудь посоветовать? Благодарю.

Теги:
ionic-framework
upgrade
ng-messages

1 ответ

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>

Рекомендации

Ещё вопросы

Сообщество Overcoder
Наверх
Меню