自定义AngularJS指令，使用$ compile更新数据

Question

我试图编写一个只在网页上显示一些标记的测试指令。出于某种原因，当我尝试使用AngularJS的angular.element()函数更新标记时，它只显示对象的可视化表示。就像从浏览器中查看JavaScript对象一样。

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

这是我的模板页面，我只是吐出指令，这太简单了。

<div my-sample></div>

我的指令看起来像这样，

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

我做错了什么？

Answer 1

$compile返回DOM元素，而不是HTML。只需element.empty().append($compile(markup)(scope))而不是使用.html()功能。