Android 4.4.4 html template strange behavior


#1

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.