Hi guys,
I have a few strange problem with html templates on android 4.4.4.
Correct template on android 4.4.2:
and incorrect on android 4.4.4:
My template html:
<update-view title="{{::Title}}" save="Save()" cancel="Cancel()">
<update-card text="Dane">
<input-item model="Model.Name" text="Nazwa"></input-item>
<input-item type="number" model="Model.WarehouseQuantity" text="Stan handlowy {{::Model.Unit.Code}}" ng-disabled="true"></input-item>
<input-item type="number" model="Model.BasePrice" text="Cena brutto {{::Model.Currency.Code}}" ng-disabled="true" model-price-format></input-item>
</update-card>
<update-card text="Ilość i cena">
<input-item type="number" model="Model.Quantity" text="Ilość [{{::Model.Unit.Code}}]" model-min="0" model-max="StateMax" ng-submit="Save()" autoselect></input-item>
<input-item type="number" model="Model.NettoPrice" model-changed="Model.OnNettoPriceChanged()" text="Cena netto {{Model.Currency.Code}}" model-min="0" model-price-format></input-item>
<input-item type="number" model="Model.BruttoPrice" model-changed="Model.OnBruttoPriceChanged()" text="Cena brutto {{Model.Currency.Code}}" model-min="0" model-price-format></input-item>
<input-item type="number" model="Model.NettoValue" text="Wartość netto {{::Model.Currency.Code}}" ng-disabled="true" model-price-format></input-item>
<input-item type="number" model="Model.BruttoValue" text="Wartość brutto {{::Model.Currency.Code}}" ng-disabled="true" model-price-format></input-item>
<input-item type="number" model="Model.Discount" text="Rabat %" ng-disabled="true"></input-item>
</update-card>
and my own directives:
var UpdateView_Template_Const =
'<ng-form name="updateForm" novalidate>'+
'<ion-view view-title={{Title}}>'+
'<ion-nav-buttons side="primary">'+
'<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>'+
'</ion-nav-buttons>'+
'<ion-nav-buttons side="secondary">'+
'<button ng-repeat="button in ::Buttons" ng-click="button.action()" ng-class="\'button button-icon icon \' + button.icon" ng-bind="button.text"></button>'+
'<button ng-if="::saveVisibility" nav-clear ng-click="Save()" ng-disabled="updateForm.$invalid" class="button button-icon icon ion-ios-checkmark-empty"></button>'+
'<button ng-if="::cancelVisibility" nav-clear ng-click="Cancel()" class="button button-icon ion-ios-close-empty"></button>'+
'</ion-nav-buttons>'+
'<ion-content class="has-header">'+
' <div ng-transclude></div>'+
'</ion-content>'+
'</ion-view>'+
'</ng-form>';
angular.module(‘UI’)
.directive(‘updateView’, function() {
return {
replace: true,
restrict: ‘E’,
/scope: {
Title: ‘@’,
Buttons: ‘=’,
Save: ‘&’,
Cancel: ‘&’
},/
transclude: true,
template: UpdateView_Template_Const,
link: function(scope, element, attrs) {
scope.saveVisibility = angular.isDefined(attrs.save);
scope.cancelVisibility = angular.isDefined(attrs.cancel);
}
};
});
angular.module('UI')
.directive('updateCard', function () {
return {
restrict: 'E',
replace: true,
scope: {
text: "@"
},
transclude: true,
template:
'<ng-form name="form">'+
'<div class="card">'+
'<div class="item item-divider positive" ng-bind="::text"></div>'+
'<div class="item item-body" ng-transclude></div>'+
'</div>'+
'</ng-form>'
};
});
angular.module('UI')
.directive('inputItem', function ($timeout) {
return {
restrict: 'E',
replace: true,
scope: {
model: "=",
type: "@",
text: "@",
icon: "@",
errorText: '@',
// action
modelChanged: '=',
// UI
textVertical: '=',
// validation
modelRequired: '=',
modelMinlength: '=',
modelMaxlength: '=',
modelPattern: '=',
modelMin: '=',
modelMax: '='
},
template:
'<ng-form name="fieldForm">' +
'<label class="item item-input field" ng-class="{labelValidationError: fieldForm.field.$invalid && !fieldForm.field.$pristine}">' +
'<span class="input-label" ng-if="text && !textVertical">{{text}}</span>' +
'<p class="input-label" ng-if="text && textVertical">{{text}}</p>' +
'<i ng-class="\'icon \' + icon + \' placeholder-icon\'"></i>'+
'<input type="{{type}}" name="field" ng-model="model">'+
'</label>'+
'<div ng-show="fieldForm.field.$invalid && !fieldForm.field.$pristine" class="validation-summary-errors">'+
'<p ng-show="fieldForm.field.$error.required">Pole {{errorText}} jest wymagane</p>'+
'<p ng-show="fieldForm.field.$error.minlength">Długość musi być większa niż {{modelMinlength}}</p>'+
'<p ng-show="fieldForm.field.$error.maxlength">Długość musi być mniejsza niż {{modelMaxlength}}</p>'+
'<p ng-show="fieldForm.field.$error.pattern">Pole {{errorText}} nie jest dopasowane do wzorca</p>'+
'<p ng-show="fieldForm.field.$error.ngMin">Pole {{errorText}} musi być większe od {{modelMin}}</p>'+
'<p ng-show="fieldForm.field.$error.ngMax">Pole {{errorText}} musi być mniejsze od {{modelMax}}</p>'+
'</div>'+
'</ng-form>',
compile: function(element, attr) {
function focusInput(element) {
var focusOn = element[0].querySelector('[autofocus]');
if (focusOn){
focusOn.focus();
$timeout(function() {
if(window.cordova && window.cordova.plugins.Keyboard)
cordova.plugins.Keyboard.show();
}, 750);
}
}
function selectInput(element) {
var selectOn = element[0].querySelector('[autoselect]');
if (selectOn) {
selectOn.select();
$timeout(function() {
if(window.cordova && window.cordova.plugins.Keyboard)
cordova.plugins.Keyboard.show();
}, 750);
}
}
var input = element.find('input');
if (!attr.type)
attr.type = 'text';
if(attr.type == 'number') {
input.bind('click', function () { this.select(); });
attr.type = 'text';
//input.attr('pattern',"\-?\d+(\.\d{0,})?");
input.attr('step', '0.01');
}
var attributes = {
'ng-model-options': attr.modelOptions,
'placeholder': attr.placeholder,
'autofocus': attr.autofocus,
'autoselect': attr.autoselect,
'ng-price-format': attr.modelPriceFormat,
'ng-readonly': attr.ngReadonly,
'ng-disabled': attr.ngDisabled,
'ng-required': angular.isDefined(attr.modelRequired) ? true: false,
'ng-minlength': attr.modelMinlength,
'ng-maxlength': attr.modelMaxlength,
'ng-pattern': attr.modelPattern,
'ng-min': attr.modelMin,
'ng-max': attr.modelMax
};
//standard input
angular.forEach(attributes,
function(value, name) {
if(angular.isDefined(value))
input.attr(name, value);
});
focusInput(element);
selectInput(element);
return function (scope, element, attr) {
scope.errorText = attr.text ? attr.text.split(' ')[0]: attr.placeholder;
scope.$watch('model', function(newVal, oldVal) {
if(newVal != oldVal && attr.modelChanged)
scope.modelChanged();
}, true);
}
}
};
});
I’’ ll be really greatful if someone can help me.