【问题标题】：HTML Button Appears as Text after $compile [duplicate]$compile后HTML按钮显示为文本[重复]
【发布时间】：2019-01-30 08:25:30
【问题描述】：

我正在尝试创建一个弹出对话框，其中包含在 JS 代码中创建的带有 Angular 的两个按钮。以下生成按钮的代码...

var html = $('<button ng-click = "cancelAlert()" > Cancel</button > <button ng-click="continueAlert()">Continue</button>');
var div = $compile(html);
var content = div($scope);
document.getElementById('dialogboxhead').innerHTML = "header";
document.getElementById('dialogboxbody').innerHTML = "body";
document.getElementById('dialogboxfoot').innerHTML = content;

给我以下 html 文本而不是实际的按钮本身...

[[object HTMLButtonElement], [object Text], [object HTMLButtonElement]]

我是否遗漏了一些我忘记添加的内容？

HTML 如下所示...

<div id="dialogoverlay"></div>
<div id="dialogbox">
    <div>
        <div id="dialogboxhead"></div>
        <div id="dialogboxbody"></div>
        <div id="dialogboxfoot"></div>
    </div>
</div>

【问题讨论】：

您想在控制器中执行此操作？我不认为你可以 - 你必须在指令中使用$compile。如果您确实需要在指令之外使用它，可以查看this question。

标签： javascript html angularjs button dialog

【解决方案1】：

以这种方式混合 AngularJS 和 jQuery 是不明智的。

这种方法的主要问题是 $compile 将观察者添加到指定范围。从 DOM 中删除添加的元素后，这些观察者将保留。这将导致内存泄漏。如果这是一个不断添加和删除的对话框——小心。

但如果必须，请不要使用innerHTML 附加编译后的内容：

  ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶d̶i̶a̶l̶o̶g̶b̶o̶x̶f̶o̶o̶t̶'̶)̶.̶i̶n̶n̶e̶r̶H̶T̶M̶L̶ ̶=̶ ̶c̶o̶n̶t̶e̶n̶t̶;̶
  var foot = document.getElementById('dialogboxfoot');
  $(foot).append(content);

The DEMO

angular.module("app",[])
.controller("ctrl",function($scope, $compile) {
  var html = $('<button ng-click = "cancelAlert()" > Cancel</button > <button ng-click="continueAlert()">Continue</button>');
  var div = $compile(html);
  var content = div($scope);
  document.getElementById('dialogboxhead').innerHTML = "header";
  document.getElementById('dialogboxbody').innerHTML = "body";
  var foot = document.getElementById('dialogboxfoot');
  $(foot).append(content);
})

<script src="//unpkg.com/jquery"></script>
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
    <div id="dialogoverlay"></div>
    <div id="dialogbox">
        <div id="dialogboxhead"></div>
        <div id="dialogboxbody"></div>
        <div id="dialogboxfoot"></div>
    </div>
</body>

【讨论】：

有什么方法可以在使用后释放这些元素以避免内存泄漏？

【解决方案2】：

如果您想以这种方式提供标记，$compile 方法接受一个字符串参数。

避免将 $compile 的输入包装为任何内容（即$(..)）。相反，只需将 html 字符串直接传递给 $compile() 方法，并通过 DOM 的 append() 方法附加 div，您应该会发现这将按预期工作：

var html = '<button ng-click="cancelAlert()">Cancel</button><button ng-click="continueAlert()">Continue</button>';
var div = $compile(html);
...
document.getElementById('dialogboxfoot').append( div[0] );

更多信息see the usage on the official docs。

这是a working jsFiddle的链接

【讨论】：

在我看来它仍然像原来一样。
请注意，IE11 不支持 ParentNode.append。见CanIuse append。
$compile 服务接受 jQuery 或 jqLike 元素作为输入也没有问题。这么说是误导。