Вот скриншот моей формы входа:
Но после того, как я обновил 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>
Что может быть причиной? Может кто-нибудь посоветовать? Благодарю.
Если директива 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>
Рекомендации