角度误差：无法设置的未定义的或空引用

参见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上看到这个问题。

来源

2015-04-17 djskinner

刚刚在IE中遇到了这个问题。虽然我不知道为什么会发生，但我确实通过使用ng-bind而不是花括号找到了解决方法。希望这可以帮助。

<div ng-bind='item.name'></div>

来源

2015-08-28 20:19:22

角度误差：无法设置的未定义的或空引用

回答

相关问题