TL的nodeValue; DR角度誤差:無法設置的未定義的或空引用
參見this Code Pen演示該誤差在IE中。用<div> {{item.name}}</div>
代替<div>{{item.name}}</div>
解決了這個問題。爲什麼?
全部問題
我有一個使用transclude: true
一個parent
指令。在parent
模板中,有一個repeater
指令,它通過動態創建ng-repeat
並編譯它來跨越內容,從而重複傳輸的內容。
的HTML:
<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
指令:
.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);
}
}
})
問題:
在Internet Explorer中,如果被傳輸的內容類似<div>{{item.name}}</div>
那麼將會出現錯誤,並且被傳輸的內容不會被重複/顯示。爲了避免這個錯誤,我發現添加一些總是存在於元素內部的簡單內容(例如<div> {{item.name}}</div>
)可以防止發生錯誤。爲什麼是這個,我如何避免它?
我創建了問題here減少的測試用例。如果您在IE10中運行它,您應該注意到在1秒和2秒後沒有任何反應,並且控制檯中會出現TypeError: Unable to set property 'nodeValue' of undefined or null reference
錯誤。但是,如果您用<div> {{item.name}}</div>
或<div>X{{item.name}}</div>
替代<div>{{item.name}}</div>
,那麼它看起來沒有問題。
我想知道如果問題是我不得不刪除repeater
屬性並重新編譯repeater
指令來創建ng-repeat
。也許有更好的方法來實現這一點?
我在IE10和IE11上看到這個問題。