TL; DR
请参阅演示IE中错误的this Code Pen。用<div>{{item.name}}</div>替换<div> {{item.name}}</div>可解决此问题。为什么？
完整问题
我有一个使用parent的{{1}}指令。在transclude: true模板中，有一个parent指令，它通过动态创建repeater并对其进行编译来转换内容，以便重复转换内容。
HTML：
ng-repeat <div ng-app="ieTest">
<parent>
<div>{{item.name}}</div>
</parent>
</div>
指令：
parent .directive('parent', function($timeout) {
return {
restrict: 'E',
controller: function() {
var ctrl = this;
$timeout(function($timeout) {
ctrl.items = [{
name: 'One'
}, {
name: 'Two'
}, {
name: 'Three'
}];
}, 1000);
$timeout(function($timeout) {
ctrl.items = [{
name: 'Five'
}, {
name: 'Two'
}, {
name: 'Three'
}, {
name: 'Four'
}];
}, 2000);
},
controllerAs: 'ctrl',
transclude: true,
template: '<section><div repeater></div></section>',
link: function() {
// This is where fancy stuff happens that is not relevant to the issue
}
}
})
指令：
repeater问题：
在Internet Explorer中，如果转换的内容与.directive('repeater', function($compile) {
return {
restrict: 'A',
require: '^parent',
link: function(scope, element, attrs, parentCtrl, transclude) {
transclude(function(clone) {
element.append(clone);
});
// Simplified for the test case but this ng-repeat expression is dynamically generated in reality
element.attr('ng-repeat', 'item in ctrl.items');
element.removeAttr('repeater');
$compile(element)(scope);
}
}
})
类似，则会出现错误，并且不会重复/显示已转录的内容。为避免此错误，我发现添加一些始终存在于元素内的简单内容（如<div>{{item.name}}</div>）可以防止错误发生。为什么这样，我该如何避免呢？
我已经创建了问题here的简化测试用例。如果你在IE10中运行它，你应该注意到在1s和2s后没有任何反应，并且会有<div> {{item.name}}</div>
控制台中的错误。但是，如果您将TypeError: Unable to set property 'nodeValue' of undefined or null reference替换为<div>{{item.name}}</div>或<div> {{item.name}}</div>等任何内容，那么它似乎没有问题。
我想知道问题是否我必须删除<div>X{{item.name}}</div>属性并重新编译repeater指令以创建repeater。也许有更好的方法来实现这个目标？
我在IE10和IE11上看到了这个问题。
答案 0 :(得分：0)
我自己在IE中遇到过这个问题。虽然我不知道为什么会发生这种情况但我确实通过使用ng-bind而不是花括号来找到解决方法。希望这会有所帮助。
<div ng-bind='item.name'></div>