Angular ng-click 事件未触发对话框按钮答案

【问题标题】：Angular ng-click event not firing for dialog box buttonAngular ng-click 事件未触发对话框按钮
【发布时间】：2018-08-23 18:20:23
【问题描述】：

我正在我的网站上创建一个弹出对话框，由于某种原因，当我单击一个应该触发事件并关闭对话框的按钮时，对话框没有被关闭。我的按钮 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";
}

我打算让 Continue 事件在未来做一些不同的事情，但现在任何一个按钮都应该摆脱对话框...

当我调用警报时，它在我的 javascript 代码中看起来像这样......

    if (raiseAlert) {
        $scope.alert();
    }

而我的 html 看起来像这样......

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

我的警报 CSS 看起来像这样（我不知道这是否相关，但 CSS 中的问题有时会弄乱其他东西）...

#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;

}
#dialogbox{
display: none;
position: fixed;
background: #000;
border-radius:7px;
width: 550px;
z-index: 10;
}

#dialogbox > div{background: #FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody {
    background: #333;
    padding: 20px;
    color: #FFF;
}
#dialogbox > div > #dialogboxfoot {
    background: #666;
    padding: 10px;
    text-align: right;
}

为什么没有像应有的那样调用 cancelAlert() 或 continueAlert() 函数并关闭对话框？

更新：

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

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

【问题讨论】：

标签： javascript html angular button dialog

【解决方案1】：

您可以在控制器上使用 $compile 来附加 innerhtml

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

例如

var app = angular.module("app", []);
app.controller("myCtrl",  ['$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);
 document.getElementById('dialogboxhead').innerHTML = "header";
 document.getElementById('dialogboxbody').innerHTML = "body";
 angular.element(document.querySelector('#dialogboxfoot')).append(content[0].outerHTML);
 angular.element(document.querySelector('#dialogboxfoot')).append(content[1].outerHTML);
}
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">

<div id="dialogoverlay"></div>
<div id="dialogbox" ng-init="alert()">
    <div>
        <div id="dialogboxhead"></div>
        <div id="dialogboxbody"></div>
        <div id="dialogboxfoot"></div>
    </div>
    
</div>
</div>

Hop 有帮助

【讨论】：

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

【解决方案2】：

你不能像这样动态添加ng-click。您必须使用 $compile() 才能使其工作。

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

在您的情况下，您必须将按钮附加到div，ID 为dialogboxfoot。所以你可以这样做：

var el = document.getElementById('dialogboxfoot');

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

要使用$compile，您必须像$scope 这样将其注入到控制器中，以使其对控制器可用。

【讨论】：