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