Angular throws "Ошибка: неверный аргумент." в IE

У меня есть директива, которая берет текст элемента и помещает 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, тем самым начав щедрость.

Ответ 1

Ваша попытка создать директиву для ввода элементов в вашу строку запускается в известную ошибку в IE, использующую метод appendChild. Я смог воспроизвести вашу ошибку IE вашей скрипкой даже после полного удаления добавления <div>.

Обратите внимание, что если вы полностью удалите конкатенацию div и попытаетесь вернуть newText в исходной форме, вы все равно получите

Ошибка: неверный аргумент.

Заключение в представлении пользовательского интерфейса, не работающем в IE9-10-11

Ответ 2

Не ответ Angular (и старый вопрос, я знаю), но я бы посоветовал вам принять неправильный подход к проблеме. Скорее вставьте разрывы (что может испортить любую разметку в строке, например), просто используйте свойство text overflow или overflow CSS.

Ответ 3

Мой "error invalid argument anonymous function call" был брошен от меня, делая следующий код ниже.

Ошибка:

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

Нет ошибки:

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