Angularjs:TypeError:无法调用null的方法'insertBefore'

Question

请在这里找到小提琴http://jsfiddle.net/UxYLa/6/

这是我想要做的简化形式.有两个指令和嵌套指令,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)

我找到了有关此https://groups.google.com/forum/#!msg/angular/dNra_7P2hwU/09-UBn1XxyUJ https://github.com/angular/angular.js/issues/2151的参考资料, 但我正在使用最新的稳定版本.

导致此错误的原因是什么.

完整代码如下:

脚本:

var myApp = angular.module('myApp', [])
    .controller('TestController', ['$scope', function ($scope) {
        $scope.data = [{ type: "a", values: [{name:"aa"}, {name: "bb"}]},
          { type: "b", values: [{name:"aa"}, {name: "bb"}]}]
}]);   
myApp.directive('directive', function () {
    return {
        scope: {
            data: "=",
        },
        restrict: 'E',
        controller: function ($scope, $element, $attrs) {
            $scope.random = function(){
                $scope.model = $scope.data[Math.floor(Math.random()*$scope.data.length)];
                console.log($scope.model)
            };
        },
         template: '<div><button ng-click="random()">Random</button><sub-directive data="model"></sub-directive></div>'
    };
});


myApp.directive('subDirective', function ($templateCache, $compile) {
    return {    
         scope: {
            data: "=",
        },
        restrict: 'E', 
        link: function (scope, element, attrs) {
             scope.$watch('data', function (newVal, oldVal) {
                if (newVal) {
                     element.html($templateCache.get(newVal.type + '.html'));
                     $compile(element.contents())(scope);
                 }
             });
        }
    };
});

HTML

  <script type="text/ng-template" id="a.html">
     a.html
  </script>


<script type="text/ng-template" id="b.html">
      <div ng-repeat="itm in data">
          <span ng-if='"string" == itm.type'>
              <input name='{{itm.Name}}'id='{{itm.Name}}' ng-model='model[itm.Name]' type='text'></input>
          </span>
      </div>
  </script>

<div ng-controller="TestController">
    <directive data="data"></directive>
</div>

Answer 1

我有相同的错误消息.我可以通过在我的html脚本标签中引用Angular之前的JQuery来解决这个问题.

Answer 2

它与编译以及数据绑定方式有关.我在这里制作了一个工作版:http://jsfiddle.net/UxYLa/9/

主要区别在于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>

必须对数组进行交互并引用它而不是模型,因为它在范围内.

编辑:经过一些挖掘,这里有一些关于错误发生原因的更多线索,但不是当你将它包装在div中时.它调用这个:parent.insertBefore(node, index.nextSibling);其中parent是ng-repeat的element.parent.如果您没有包装器,则父级为null.

这意味着只要您正在编译的html在直接更改元素时具有位于模板外部的监视,就会发生错误.

我还提出了一个解决方案,它不会尝试直接更改元素,而是将编译后的元素附加到它.因此,当在摘要周期中检查时,所有内容都将具有适当的结构.http://jsfiddle.net/UxYLa/12/

希望这有帮助.