我正在使用alertify.js构建一个设置模式窗口来更改页面的图像背景，但是当alertify.js创建包含我的下拉列表的html实例时，选择会丢失ng-change功能，但如果下拉列表位于页面上，则它可以工作。
从下拉列表中选择任何内容，您将收到由
触发的警报ng-change="main.unitChanged() " but no on the modal window
当弹出窗口时，如何使用 ng-change 来实现此功能？
骗子example
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
var self = this;
self.backGroundSelected = 'Balloon';
self.fontSizes = [
'8',
'14',
'20'
];
self.unitChanged = function(selectedOption) {
alert(selectedOption);
};
self.changeBackground = [
'Balloon',
'Billboard',
'BusStop',
'GirlWithBalloons',
'GreenField',
'NatureCouple',
'RedFlowers',
'PrescriptionPad',
'SeniorMan',
'SunCouple',
'Victory',
'WhiteFlowers',
'WomanWithTree',
];
self.typeOfFont = [
'Serif',
'Sans-serif',
'Roboto'
];
self.legendAboutOption = function() {
alertify.alert(document.getElementById("configuration").innerHTML).set('title', 'Back-Ground Settings').set('transition', 'pulse').set('resizable', true).resizeTo('35%', '70%');
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/alertify.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/default.min.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="//cdn.jsdelivr.net/alertifyjs/1.4.1/alertify.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary glyphicon glyphicon-cog" ng-click="main.legendAboutOption()">Display Window</button>
<br>
<br>
<br>
<br>
</div>
<!--Templates For modal box-->
<div class="container-fluid" id="configuration" style="display:block">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<span class="label label-default">Backgrounds:Will fire an alert on ng-change</span>
</div>
<div class="col-md-3">
<select ng-model="myBackGround" ng-change="main.unitChanged(myBackGround)" ng-options="BackGround for BackGround in main.changeBackground">
<option value="">Choose Template</option>
</select>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
您的事件在模式内停止触发的原因是因为您正在创建 View 的新副本，您应该传递 View 元素本身。
self.legendAboutOption = function(){
alertify.alert(document.getElementById("configuration"))
.set({'title': 'Background Settings','transition':'pulse','resizable':true})
.resizeTo('35%', '70%');
}
关于javascript - NG-CHANGE 不会在 Alertify 弹出窗口实例上触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32503870/