У меня есть директива, которая берет текст элемента и помещает wbr элементы после каждого 10-го символа. Я использую его, например, в ячейках таблицы с длинным текстом (например, 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 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. ничего не говорит о происхождении.)
P.S.: Я знаю, что IE вообще не знает wbr, но это не проблема.
Изменить: в моем реальном приложении. Я переписал директиву, чтобы не искать текст элемента и не изменять его, а передавать текст через атрибут, и теперь отлично работает во всех браузерах, Но мне все еще любопытно, почему оригинальное решение давало эту ошибку в IE, тем самым начав щедрость.
