要素のテキストを受け取り、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でそのエラーを発生させ、その結果、報奨金が発生した理由については、まだ興味があります。
文字列に要素を挿入するディレクティブを作成しようとすると、IE処理appendChild
メソッドで既知のバグが発生します。エラーを再現できましたIE <div>
の追加を完全に削除した後でも、フィドルを使用します。
div
連結を完全に削除し、newText
を元の形式で返そうとしても、次のようになることに注意してください。
エラー:引数が無効です。
僕の "error invalid argument anonymous function call"
は、以下のコードで次のことを行っている私からスローされていました。
エラー:
<span data-ng-bind="name.first">{{name.first}}</span>
エラーなし:
<span data-ng-bind="name.first"></span>
Angularの答え(そして古い質問、私は知っています)ではありませんが、問題に対して間違ったアプローチを取っている可能性があることをお勧めします。むしろ、ブレークを挿入します(これにより、マークアップが台無しになります)文字列など)、CSStext-overflowまたはoverflowプロパティを使用するだけです。
HTMLテンプレートで次のエラーが発生したときに、IEで同じエラーが発生しました:
<textarea disabled [(ngModel)]="some.var">{{some.var}}</textarea>
無効 textareaはIEでngModelを許可しません
Chrome、FFは文句を言わず、ただIE Edge。テンプレートも確認することをお勧めします。