TypeError：无法在$ compile上调用null的方法'insertBefore'

Question

我正在尝试构建一个递归指令。

看起来像这样：

var theTemplate = 
        '<span>{</span>' + 
            '<div>'+
                '<p>{{argVal}}</p>' +
                '<custom-args arg-val="argVal[0]"></custom-args>' +
            '</div>';

    return {
        restrict: "E",
        scope: {
            argVal: '='
        },
        controller: function($scope){
            //just some utilities
        },
        link: function(scope, element){
            element.html('').append(theTemplate);
            $compile(element.contents())(scope);
        }
    };      

问题是，当我运行它时，我得到：

Angularjs: TypeError: Cannot call method 'insertBefore' of null

问题是什么？

Answer 1

问题在于

            element.html('').append(theTemplate);
            $compile(element.contents())(scope);

我不需要将模板附加到空白HTML，而是需要将其直接附加到HTML

            element.html(theTemplate);
            $compile(element.contents())(scope);

现在有效！