我正在尝试创建一个弹出对话框,其中包含两个用JS代码创建的带角度的按钮。以下代码生成按钮...
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>
答案 0 :(得分:2)
如果您想以这种方式提供标记,则$compile
方法接受一个字符串参数。
避免将$ compile的输入包含任何内容(即$(..)
)。相反,只需将html字符串直接传递给$compile()
方法,并通过DOM div
方法附加append()
,您应该会发现它可以按预期工作:
var html = '<button ng-click="cancelAlert()">Cancel</button><button ng-click="continueAlert()">Continue</button>';
var div = $compile(html);
...
document.getElementById('dialogboxfoot').append( div[0] );
的链接
答案 1 :(得分:0)
以这种方式混合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);
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>