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

我正在尝试编写一个测试指令，它只在网页上显示一些标记。出于某种原因，当我尝试使用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));
        }
    }
});

eventsApp.directive（'mySample'，function（$compile）{
变量标记=“{sampleData}}
”；
返回{
链接：功能（范围、要素、附件、控制器）{
element（element）.html（$compile（markup）（scope））；
}
}
});

---

我做错了什么？

$compile

返回DOM元素，而不是HTML。尝试只使用

element.empty（）.append（$compile（markup）（scope））

而不是使用

.html（）

函数。

代码似乎正确，因此我感到困惑。