Angular.js $ compile返回html数组但不返回实际的html

Question

我有以下代码:

app.directive('mySample', function($compile) {
    return {
        //template:"<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>"
        link: function(scope, element, atts, controller) {
            var markup = "<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>";  
            angular.element(element).html($compile(markup)(scope));
            console.log($compile(markup)(scope));
        }
    };
});

而且我希望它能够产生一个输入,一些通过示波器和休息耦合的跨度.但是我得到了这个输出:

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]

我也尝试了模板,在这里单独评论,然后评论链接部分.这会生成输入和中断元素,但不会生成显示耦合模型输入sampleData的跨度.

我在http://jsfiddle.net/KvdM/nwbsT/上有一个非工作样本来演示它.

Answer 1

试试这个:

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

Answer 2

运行$ compile服务返回的函数可以为您提供DOM元素而不是html.所以你需要使用append(或等效的)将它们插入你的页面:

angular.element(element).append($compile(markup)(scope));