javascript - Angular ng-click 事件不会触发对话框按钮

Question

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

Answer 1

您可以在 Controller 上使用 $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>

希望有帮助