1

I have an input text box with a ng-model-on-blur directive(copied from Angularjs: input[text] ngChange fires while the value is changing) with a ng-change event handler attached to it. It works great as in when the user types out of the box it fires the function attached to ng-change. I modified the link function so it also binds on change and paste events.

link: function(scope, elm, attr, ngModelCtrl) {
        if (attr.type === 'radio' || attr.type === 'checkbox') return;

        if($sniffer.hasEvent('input')){
            elm.unbind('input').unbind('keydown').unbind('change').unbind('paste');
        }
        else if($sniffer.hasEvent('change')){
            elm.unbind('input').unbind('keydown').unbind('change').unbind('paste');
        }
        //IE8 doesn't recognize the input or change events and throws error on unbind input.
        else{
            elm.unbind('keydown').unbind('change').unbind('paste');
        }
        elm.bind('blur change paste', function() {
            scope.$apply(function() {
                ngModelCtrl.$setViewValue(elm.val());
            });
        });
    }

I have a button on that page which opens a popup page from where a user can enter something and then transfer the value back to the input text box on the parent page. In most of the other browsers(Chrome, Firefox, Safari, even IE8..) the ng-change is fired when the data is received from the popup to the input text box but in IE9 and 10 ng-change isn't fired when data is received from popup. The directive is calling the ng-change function when user types out of the field, manually pastes the data or through right click on the text box but when the data is coming from the popup it doesn't fire the function.

The popup doesn't use AngularJS but opener property of the window object to transfer the value to the input text box.

Any help would be greatly appreciated!

Community
  • 1
  • 1
bazzinga
  • 165
  • 1
  • 5
  • 16
  • After the value in the text box is updated from the popup I checked the value of the scope variable using IE9 script console. When the text box showed a value, angular.element(document.getElementById('name')).scope().name yielded "". I checked in Chrome dev tools and the scope value is updated the moment the parent receives the value from the popup. – bazzinga Aug 11 '14 at 22:05

1 Answers1

1

I was able to solve the issue because of the way the change event was triggered from the popup page on the parent page element. The popup page after setting opener.parentElement.value = newValue; was executing parentElement.fireEvent('change') if document.createEventObject was true, else it was executing parentElement.dispatchEvent() for non-IE browsers.

MS introduced DOM Level 2 events with IE9 and hence fireEvent was not being supported in IE >=9 browsers. Since document.createEventObject was still true for IE>=9 it was executing fireEvent and hence in my directive elm.bind('change') was not getting triggered. I changed my popup javascript file to: 

if(element.dispatchEvent) {
    //IE >= 9 and other browsers event code
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true );
    return element.dispatchEvent(evt);
}
else if(element.fireEvent){
    //IE < 9
    var evt = document.createEventObject();
    return element.fireEvent('on'+event,evt);
}

and ng-change began triggering for IE >= 9 also. This post Why does .fireEvent() not work in IE9? helped me in understanding the problem and solving it.

Thanks to this awesome community again!

Community
  • 1
  • 1
bazzinga
  • 165
  • 1
  • 5
  • 16
  • I ran into another problem after solving the ng-change issue. The page also uses Prototype 1.6 javascript library for a datepicker widget and that uses Event.observe(parentElement, 'change', callback) to update other fields. The problem is for IE9 and 10 the dispatchEvent fires the ng-change on the parentElement but the callback inside Event.observe isn't fired which leads to other problems on the page. Would really appreciate help from someone so Prototype's event system and AngularJS can play nicely. – bazzinga Aug 20 '14 at 23:51