web-dev-qa-db-ja.com

Angularは「エラー:無効な引数」をスローします。IE

要素のテキストを受け取り、10文字ごとに wbr 要素を配置するディレクティブがあります。たとえば、長いテキスト(URLなど)のあるテーブルセルで使用しているため、テーブルにまたがることはありません。ディレクティブのコード:

myApp.directive('myWbr', function ($interpolate) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // get the interpolated text of HTML element
            var expression = $interpolate(element.text());

            // get new text, which has <wbr> element on every 10th position
            var addWbr = function (inputText) {
                var newText = '';
                for (var i = 0; i < inputText.length; i++) {
                    if ((i !== 0) && (i % 10 === 0)) newText += '<wbr>'; // no end tag
                    newText += inputText[i];
                }
                return newText;
            };

            scope.$watch(function (scope) {
                // replace element's content with the new one, which contains <wbr>s
                element.html(addWbr(expression(scope)));
            });
        }
    };
});

IE(IE8とIE9を試しました)を除いては正常に動作します。コンソールにエラーがスローされます:Error: Invalid argument.

これが jsFiddle です。ボタンをクリックすると、コンソールにエラーが表示されます。

非常に明白な質問:なぜそこにエラーがあるのか​​、その原因は何か、そしてなぜIEだけにあるのか?

(ボーナス質問:どうすればIE開発ツールを作成して、ソースコードからの行など、エラーについて詳しく教えてくれますか。それを見つけるのに時間がかかったので、Error: Invalid argument.は起源について多くを語っていません。)

追伸:IEはwbrをまったく知りませんが、それは問題ではありません。

編集:実際のアプリケーションでは、要素のテキストを調べて変更するのではなく、属性を介して入力テキストを渡すようにディレクティブを書き直しました、すべてのブラウザで正常に動作するようになりました。しかし、元のソリューションがIEでそのエラーを発生させ、その結果、報奨金が発生した理由については、まだ興味があります。

15
przno

文字列に要素を挿入するディレクティブを作成しようとすると、IE処理appendChildメソッドで既知のバグが発生します。エラーを再現できましたIE <div>の追加を完全に削除した後でも、フィドルを使用します。

div連結を完全に削除し、newTextを元の形式で返そうとしても、次のようになることに注意してください。

エラー:引数が無効です。

IビューでのトランスクルージョンがIE9-10-11で機能しない

9
Dave Alperovich

僕の "error invalid argument anonymous function call"は、以下のコードで次のことを行っている私からスローされていました。

エラー:

<span data-ng-bind="name.first">{{name.first}}</span>

エラーなし:

<span data-ng-bind="name.first"></span>
1
n00bsauce

Angularの答え(そして古い質問、私は知っています)ではありませんが、問題に対して間違ったアプローチを取っている可能性があることをお勧めします。むしろ、ブレークを挿入します(これにより、マークアップが台無しになります)文字列など)、CSStext-overflowまたはoverflowプロパティを使用するだけです。

0
see sharper

HTMLテンプレートで次のエラーが発生したときに、IEで同じエラーが発生しました:

<textarea disabled  [(ngModel)]="some.var">{{some.var}}</textarea>

無効 textareaはIEでngModelを許可しません

Chrome、FFは文句を言わず、ただIE Edge。テンプレートも確認することをお勧めします。

0
oFace