对话框按钮未触发角ng-click事件

时间:2018-08-23 18:20:23

标签: javascript html angular button dialog

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

2 个答案:

答案 0 :(得分:1)

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

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

在这种情况下,您必须将按钮附加到ID为div的{​​{1}}上。因此,您可以执行以下操作:

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一样注入控制器,以使其对控制器可用。

答案 1 :(得分:1)

您可以在控制器上与 $ 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);
}

例如

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>

希望如此