我有一个指令,它获取元素的文本并在每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.
”并没有提供太多关于错误来源的信息。)
P.S .:我知道IE根本不知道wbr,但这不是问题所在。
编辑:在我的实际应用程序中,我已经重新编写了指令,不再查看元素的文本并修改该文本,而是通过属性传递输入文本,并且现在在所有浏览器中都可以正常工作。 但我仍然好奇为什么原始解决方案会在IE中出现错误,因此开始了悬赏。