javascript - ngModel is not correctly updated in Internet Explorer - AngularJS 1.3 - Stack Overflow

Hello I have strange issue that only appears in IE 11 with angular 1.3.

I have a directive which allows me to store Object as ngModel value of input element. It works without any problem with AngularJS 1.2, but it doesn't work with AngularJS 1.3 (only in the Internet Explorer).

It is simply code:

elem.on('input', function(){
   var val = elem.val();
    ngModel.$setViewValue({
        'sampleData': new Date().getTime(),
        'value': val
    });
    scope.$apply();
});

When I type text in IE, the input sets correct object as model value for some milliseconds but next changes it into string. In other browsers it updates ngModel correctly.

You can see this strange behavior there:

AngularJS 1.2: / (works in IE, Chrome, and Firefox),

AngularJS 1.3: / (doesn't work in IE 11, works in Chrome and Firefox)

What is the reason and how can I fix it?

It is my whole directive:

app.directive('myInput',function(){
    return{
        restrict: 'A',
        require: 'ngModel',
        scope: {},
        priority: 1,
        link: function(scope, elem, attrs, ngModel){
            elem.off('input');
            elem.off('change');

            ngModel.$render = function(){
                var model = {
                    'sampleData': 'sampleData',
                    value: ''
                }                                   
                ngModel.$setViewValue(model);
                elem.val(model.value);
            }

            elem.on('input', function(){
               var val = elem.val();
                ngModel.$setViewValue({
                    'sampleData': new Date().getTime(),
                    value: val
                });
                scope.$apply();
            });
        }
    }
});

Hello I have strange issue that only appears in IE 11 with angular 1.3.

I have a directive which allows me to store Object as ngModel value of input element. It works without any problem with AngularJS 1.2, but it doesn't work with AngularJS 1.3 (only in the Internet Explorer).

It is simply code:

elem.on('input', function(){
   var val = elem.val();
    ngModel.$setViewValue({
        'sampleData': new Date().getTime(),
        'value': val
    });
    scope.$apply();
});

When I type text in IE, the input sets correct object as model value for some milliseconds but next changes it into string. In other browsers it updates ngModel correctly.

You can see this strange behavior there:

AngularJS 1.2: http://jsfiddle/aartek/e6Lvpqj3/ (works in IE, Chrome, and Firefox),

AngularJS 1.3: http://jsfiddle/aartek/mvx9dbyu/2/ (doesn't work in IE 11, works in Chrome and Firefox)

What is the reason and how can I fix it?

It is my whole directive:

app.directive('myInput',function(){
    return{
        restrict: 'A',
        require: 'ngModel',
        scope: {},
        priority: 1,
        link: function(scope, elem, attrs, ngModel){
            elem.off('input');
            elem.off('change');

            ngModel.$render = function(){
                var model = {
                    'sampleData': 'sampleData',
                    value: ''
                }                                   
                ngModel.$setViewValue(model);
                elem.val(model.value);
            }

            elem.on('input', function(){
               var val = elem.val();
                ngModel.$setViewValue({
                    'sampleData': new Date().getTime(),
                    value: val
                });
                scope.$apply();
            });
        }
    }
});

• javascript
• angularjs
• internet-explorer
• angularjs-ng-model

Share Improve this question Follow edited Apr 19, 2015 at 12:25 akn asked Apr 17, 2015 at 12:10 aknakn 3,72211 gold badge2929 silver badges4545 bronze badges 4

• Which version of IE? – BobDoleForPresident Commented Apr 17, 2015 at 14:05
• @BobDoleForPresident IE 11 – akn Commented Apr 17, 2015 at 15:02
• 2 jsfiddle/mvx9dbyu/5 - I am not sure scope.$apply failing or not, because I cannot open developer console on my ie 11. – YOU Commented Apr 19, 2015 at 12:55
• @YOU, thanks, it works fine - no digest error in the console. – akn Commented Apr 19, 2015 at 19:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7 +50

Angular 1.3 has some kind of hack for input event for IE browsers. Please analyse $SnifferProvider.hasEvent function. This function is used within inputDirective to guarantee the correct viewValue for browsers which does not support input event. Workaround is based on keydown event which is widely supported.

To fix your code example for IE simple turn of keydown event to disable all triggers.

link: function(scope, elem, attrs, ngModel){
        elem.off('input');
        elem.off('change');
        elem.off('keydown');
        ...