关于javascript：HTML按钮在$ compile之后显示为文本

angularjsbuttondialoghtmljavascript

HTML Button Appears as Text after $compile

本问题已经有最佳答案，请猛点这里访问。

我正在尝试创建一个弹出对话框，其中有两个按钮是用角度为JS代码创建的。生成按钮的以下代码…

1
2
3
4
5
6

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文本而不是实际的按钮本身…

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

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

HTML如下所示…

1

相关讨论

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

避免用任何东西包装$compile的输入(即$(..))。相反，只需将HTML字符串直接传递给$compile()方法，并通过dom append()方法附加div，您会发现这将按预期工作：

1
2
3
4

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

有关更多信息，请参阅官方文档上的用法。

这里有一个链接指向一个正在工作的JSfiddle

相关讨论

这样混合AngularJS和JQuery是不明智的。

这种方法的主要问题是$compile向指定的作用域添加了观察程序。从DOM中删除添加的元素后，这些观察程序将保留。这将导致内存泄漏。如果这是一个不断添加和删除的对话框，请注意。

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

1
2
3

?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);

演示

1
2
3
4
5
6
7
8
9
10

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);
})

1
2
3
4
5
6
7
8
9
10

<script src="//unpkg.com/jquery">
<script src="//unpkg.com/angular/angular.js">
<body ng-app="app" ng-controller="ctrl">

</body>

相关讨论