1

ng-model-on-blur ディレクティブ ( Angularjs からコピー: input[text] ngChange fires while the value is changing ) を含む入力テキスト ボックスがあり、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 を使用せず、window オブジェクトの opener プロパティを使用して値を入力テキスト ボックスに転送します。

どんな助けでも大歓迎です！

4

1 に答える 1

1

親ページ要素のポップアップページから変更イベントがトリガーされる方法により、問題を解決できました。opener.parentElement.value = newValue; を設定した後のポップアップ ページ。document.createEventObject が true の場合は、parentElement.fireEvent('change') を実行していました。それ以外の場合は、非 IE ブラウザに対して parentElement.dispatchEvent() を実行していました。

MS は IE9 で DOM レベル 2 イベントを導入したため、fireEvent は IE >=9 ブラウザではサポートされていませんでした。document.createEventObject は IE>=9 ではまだ true だったので、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 で機能しないのはなぜですか? 問題を理解して解決するのに役立ちました。

この素晴らしいコミュニティに再び感謝します！

于 2014-08-20T06:25:46.453 に答える