Javascript Angularjs:TypeError:无法调用方法'；插入前'；空的

请在这里找到小提琴

这是我试图做的事情的简化形式。有两个指令，一个是嵌套指令，

subDirective

，它根据选择（随机）动态创建html表单。如果你反复点击按钮，它会抛出下面的错误

TypeError: Cannot call method 'insertBefore' of null
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:138:283
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:7:332)
    at q.after (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:138:258)
    at Object.O.(anonymous function) [as after] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:139:414)
    at Object.enter (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:141:226)
    at Object.move (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:141:360)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:185:282
    at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:99:371)

我找到了这方面的参考资料 但我使用的是最新的稳定版本

这个错误的原因是什么

完整代码如下：

脚本：

var myApp=angular.module（'myApp'，[]）
.controller（'TestController'，['$scope'，函数（$scope）{
$scope.data=[{type:“a”，值：[{name:“aa”}，{name:“bb”}]}，
{type:“b”，值：[{name:“aa”}，{name:“bb”}]]
}]);   
myApp.directive（'directive'，function（）{
返回{
范围：{
数据：“=”，
},
限制：'E'，
控制器：函数（$scope、$element、$attrs）{
$scope.random=函数（）{
$scope.model=$scope.data[Math.floor（Math.random（）*$scope.data.length）]；
log（$scope.model）
};
},
模板：“随机”
};
});
指令（'subDirective'，函数（$templateCache，$compile）{
返回{
范围：{
数据：“=”，
},
限制：'E'，
链接：函数（范围、元素、属性）{
范围.$watch（'data'，函数（newVal，oldVal）{
if（newVal）{
html（$templateCache.get（newVal.type+'.html'）；
$compile（element.contents（））（范围）；
}
});
}
};
});

html

a、 html

它与编译和数据绑定方式有关。我在这里制作了一个工作版本：

主要区别在于b.html

  <div ng-if="data.values">
      <div ng-repeat="itm in data.values">
          <input name='{{itm.name}}' id='{{itm.name}}' ng-model="itm.name" type='text'></input>
      </div>
  </div>

必须在阵列上交互，并参考itm而不是模型，因为它在范围内

编辑：在一些挖掘之后，这里有一些关于错误发生原因的更多线索，但不是当您将其包装到div中时。它正在调用：

parent.insertBefore（node，index.nextSibling）其中parent是ng repeat的element.parent。如果没有包装器，则父级为空

这意味着当您正在编译的html在直接更改元素时有一个位于模板外部的手表时，就会发生错误

我还提出了一个解决方案，该解决方案不尝试直接更改元素，而是将已编译的元素附加到它。这样，当在摘要循环中检查时，所有内容都将具有适当的结构

希望这能有所帮助。
我遇到了完全相同的问题，解决这个问题的办法似乎是删除我的一个div上的“ng view”类。这就像是引起了一场冲突

我有：

<div class="ng-view"> 
  <div ng-view>
    ...


...

然后改为：

<div class="ngview">
  <div ng-view>
    ...


...

我猜ng view是一个保留词，但我认为它作为类使用时不会受到影响
 我在使用UI路由器时遇到了同样的问题，并且A标记在href属性中的URL错误，该属性不是路由。
我收到了相同的错误消息。我可以通过在html脚本标记中引用Angular之前的JQuery来解决这个问题。
我也有同样的问题，但我发现我在
标记上添加了
class=“md-sticky”
，意思是说
class=“md-no-sticky”

一旦我改变了这个类，这就为我解决了问题，但我也有同样的问题，使用
ng repeat
不在它自己的父标记中，但我有！我只是在那个父标记上使用了
ng show=“condition”
，如果父标记没有显示，就会导致这个问题，所以我将它改为
ng if=“condition”
，解决了这个问题。
+1非常感谢。如果我从您的代码中删除
，它将中断。不知道该怎么解释。我不知道我用这种方法有多可靠。再次感谢您的帮助。我认为现在发生的是html更改为a.html，但b.html中的手表仍在尝试在编译a时更新。这有一些错误。至少，这似乎与此有关。包含angular.js而不是angular.min.js可能会有所帮助。再次感谢。至少我可以再缩小一点。在模板的根上重复ng是原因。将其包装在div中似乎可以停止错误。看见想知道为什么吗？我补充了一些细节，开始有点道理了？我可以访问你的小提琴的前一个版本（不是12）。是你提到的最后一个sol。不管怎样，谢谢你的解释，我现在有一些想法。确认后将更新。ng-view是一个角度路线定向的好主意，谢谢
<div class="ng-view"> 
  <div ng-view>
    ...

<div class="ngview">
  <div ng-view>
    ...