Javascript 对话框按钮未触发的单击事件

我正在我的网站上创建一个弹出对话框，出于某种原因，当我单击一个按钮，该按钮应该触发一个事件并关闭对话框时，对话框没有被关闭。我的按钮javascript代码如下所示

$scope.alert = function () {
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('dialogoverlay');
        var dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH + "px";
        dialogbox.style.left = (winW / 2 - (550 * .5) + "px");
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
        document.getElementById('dialogboxhead').innerHTML = "header";
        document.getElementById('dialogboxbody').innerHTML = "body";
        document.getElementById('dialogboxfoot').innerHTML = '<button ng-click="cancelAlert()">Cancel</button>   <button ng-click="continueAlert()">Continue</button>';
}

$scope.cancelAlert = function () {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
}

$scope.continueAlert = function () {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
}

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

    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看起来像这样

$scope.alert = function () {
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('dialogoverlay');
        var dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH + "px";
        dialogbox.style.left = (winW / 2 - (550 * .5) + "px");
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
        document.getElementById('dialogboxhead').innerHTML = "header";
        document.getElementById('dialogboxbody').innerHTML = "body";
        document.getElementById('dialogboxfoot').innerHTML = '<button ng-click="cancelAlert()">Cancel</button>   <button ng-click="continueAlert()">Continue</button>';
}

$scope.cancelAlert = function () {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
}

$scope.continueAlert = function () {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
}

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

    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;

为什么不调用

cancelAlert（）

或

continueAlert（）

函数并关闭对话框

更新：

我已经将代码更改为现在的样子

$scope.alert = function () {
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('dialogoverlay');
        var dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH + "px";
        dialogbox.style.left = (winW / 2 - (550 * .5) + "px");
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
        document.getElementById('dialogboxhead').innerHTML = "header";
        document.getElementById('dialogboxbody').innerHTML = "body";
        document.getElementById('dialogboxfoot').innerHTML = '<button ng-click="cancelAlert()">Cancel</button>   <button ng-click="continueAlert()">Continue</button>';
}

$scope.cancelAlert = function () {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
}

$scope.continueAlert = function () {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
}

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

    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文本转换为实际的按钮？

您不能像这样动态添加，

ng单击。
您必须使用，
$compile（）
使其工作

divtoappend.append($compile('<button ng-click="cancelAlert()">Cancel</button>   <button ng-click="continueAlert()">Continue</button>')($scope));

要使用
$compile
，您必须像
$scope
一样将其注入控制器中，以使其可供控制器使用。
您可以在控制器上使用$compile进行HTML附加

app.controller("cntrl", ['$scope','$compile',
function ($scope,$compile) {

$scope.alert = function () {
var html = angular.element('<button ng-click="cancelAlert()"> Cancel</button ><button ng-click="continueAlert()">Continue</button>');
var div = $compile(html);
var content = div($scope);
     angular.element(document.querySelector('#dialogboxfoot')).append(content[0].outerHTML);
     angular.element(document.querySelector('#dialogboxfoot')).append(content[1].outerHTML);
}

app.controller（“cntrl”、[“$scope”、“$compile”，
函数（$scope$compile）{
$scope.alert=函数（）{
var html=angular.element（'CancelContinue'）；
var div=$compile（html）；
var内容=div（$scope）；
元素（document.querySelector（'#dialogboxfoot'））.append（内容[0].outerHTML）；
元素（document.querySelector（'#dialogboxfoot'））.append（content[1].outerHTML）；
}

比如说


var-app=angular.module（“app”，[]）；
app.controller（“myCtrl”[“$scope”，“$compile”，
函数（$scope$compile）{
$scope.alert=函数（）{
var html=angular.element（'CancelContinue'）；
var div=$compile（html）；
var内容=div（$scope）；
document.getElementById（'dialogboxhead'）.innerHTML=“header”；
document.getElementById（'dialogboxbody'）。innerHTML=“body”；
元素（document.querySelector（'#dialogboxfoot'））.append（内容[0].outerHTML）；
元素（document.querySelector（'#dialogboxfoot'））.append（content[1].outerHTML）；
}
}])；

我尝试将document.getElementById（'dialogboxfoot'）.innerHTML插入到您在响应中所说的document.body中，但对话框中出现的只是文本[[object HtmlButtoneElement]，[object text]，[object HtmlButtoneElement]]让我们用更新的答案检查一下。我希望这个答案对您有所帮助：）现在该按钮出现了，但当我单击“确定”时，它仍然没有做任何事情。我让它工作了！至少部分工作。我得到了您的建议，只是我没有在内容[0]和内容[1]之后使用.outerHTML。当我将其与outerHTML一起使用时，出现了“取消”按钮，但对单击没有正确响应。现在唯一奇怪的是，“继续”按钮由于某种原因没有出现。好的，解决了它。按钮对象包含在html对象列表中（因此我们访问内容[0]）。两个按钮之间列出的空间被列为另一个对象，因此访问内容[1]仅访问按钮之间的空间。内容[2]实际上包含第二个按钮。非常感谢您的帮助！