自定义 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 returns DOM 个元素，而不是 HTML。尝试只 element.empty().append($compile(markup)(scope)) 而不是使用 .html() 函数。

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

Custom AngularJS directive, updating the data with $compile

javascript

angularjs

angularjs-directive