Javascript IE中的角度错误：无法设置未定义或空引用的nodeValue

TL；DR

请参见演示IE中错误的部分。用

{{item.name}

替换

{{item.name}}

修复了该问题。为什么?

完整问题

我有一个

parent

指令，它使用

transclude:true

。在

parent

模板中有一个

repeater

指令，该指令通过动态创建

ng repeat

并对其进行编译以重复转置的内容来转置内容

HTML：

<div ng-app="ieTest">
    <parent>
        <div>{{item.name}}</div>
    </parent>
</div>

中继器

指令：

.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
    }
  }
})

.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中，如果转写的内容类似于

{{item.name}

，则会出现错误，转写的内容不会重复/显示。为了避免这个错误，我发现添加一些总是出现在元素内部的简单内容，比如

{{item.name}

，可以防止错误的发生。这是为什么？我如何避免

我已经为这个问题创建了一个简化的测试用例。如果您在IE10中运行它，您应该注意到1s和2s之后不会发生任何事情，并且会出现

TypeError:无法设置未定义或空引用的属性'nodeValue'

控制台中的错误。但是，如果将

{{item.name}}

替换为

{{item.name}}

或任何类似

X{{item.name}

的内容，则它似乎可以正常工作

我想知道问题是否在于我必须删除

repeater

属性并重新编译

repeater

指令以创建

ng repeat

。也许有更好的方法来实现这一点

---

我在IE10和IE11上看到了这个问题。

我自己在IE中遇到了这个问题。虽然我不知道为什么会发生这种情况，但我确实找到了一个解决方法，使用ng bind而不是花括号。希望这有帮助

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