$ comp后,HTML按钮显示为文本

时间:2018-08-23 21:34:01

标签: javascript html angularjs button dialog

我正在尝试创建一个弹出对话框,其中包含两个用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>

2 个答案:

答案 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] );

有关更多信息,see the usage on the official docs

这里是a working jsFiddle

的链接

答案 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);

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>