angularjs ng-change не запускается в директиве ng-model-onblur в IE9 и 10

У меня есть текстовое поле ввода с директивой ng-model-on-blur (скопировано из Angularjs: input[text] ngChange срабатывает при изменении значения) с прикрепленным к нему обработчиком событий ng-change. Он отлично работает, так как когда пользователь печатает из коробки, он запускает функцию, прикрепленную к ng-change. Я изменил функцию ссылки, чтобы она также связывалась с событиями изменения и вставки.

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());
            });
        });
    }

У меня есть кнопка на этой странице, которая открывает всплывающую страницу, откуда пользователь может что-то ввести, а затем передать значение обратно в текстовое поле ввода на родительской странице. В большинстве других браузеров (Chrome, Firefox, Safari, даже IE8..) ng-change запускается, когда данные получены из всплывающего окна в текстовое поле ввода, но в IE9 и 10 ng-change не запускается, когда данные получены из всплывающего окна. Директива вызывает функцию ng-change, когда пользователь вводит данные за пределы поля, вручную вставляет данные или щелкает правой кнопкой мыши текстовое поле, но когда данные поступают из всплывающего окна, функция не запускается.

Всплывающее окно использует не AngularJS, а свойство открывателя объекта окна для передачи значения в текстовое поле ввода.

Любая помощь будет принята с благодарностью!


javascript angularjs internet-explorer angularjs-ng-change
person bazzinga    schedule 11.08.2014    source источник
comment
После того, как значение в текстовом поле обновлено из всплывающего окна, я проверил значение переменной области с помощью консоли сценария IE9. Когда текстовое поле показало значение, angular.element(document.getElementById('name')).scope().name yield . Я проверил инструменты разработчика Chrome, и значение области действия обновляется в тот момент, когда родитель получает значение из всплывающего окна.   -  person bazzinga    schedule 12.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

Мне удалось решить проблему из-за того, как событие изменения было вызвано со всплывающей страницы в элементе родительской страницы. Всплывающая страница после установки opener.parentElement.value = newValue; выполнялся parentElement.fireEvent('change'), если document.createEventObject был истинным, иначе выполнялся parentElement.dispatchEvent() для браузеров, отличных от IE.

MS представила события DOM уровня 2 с IE9, и, следовательно, fireEvent не поддерживался в браузерах IE >= 9. Поскольку document.createEventObject все еще был истинным для IE>=9, он выполнял fireEvent и, следовательно, в моей директиве elm.bind('change') не срабатывал. Я изменил свой всплывающий файл javascript на:

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);
}

и ng-change также начал срабатывать для IE >= 9. Этот пост Почему .fireEvent() не работает в IE9? помог меня в понимании проблемы и ее решении.

Еще раз спасибо этому замечательному сообществу!

person bazzinga    schedule 20.08.2014
comment
Я столкнулся с другой проблемой после решения проблемы с ng-change. На странице также используется библиотека javascript Prototype 1.6 для виджета выбора даты, которая использует Event.observe(parentElement, 'change', callback) для обновления других полей. Проблема заключается в том, что для IE9 и 10 dispatchEvent запускает ng-change для parentElement, но обратный вызов внутри Event.observe не запускается, что приводит к другим проблемам на странице. Был бы очень признателен за помощь от кого-то, чтобы система событий Prototype и AngularJS могли хорошо работать. - person bazzinga; 21.08.2014