AngularJS ui.bootstrap 模态对话框未显示
AngularJS ui.bootstrap modal dialog is not showing
我已经看到这个问题了:AngularJS bootstrap.ui modal not showing
。但是这些答案中的任何一个都没有帮助我。
我正在尝试使用 ui.bootstrap
模块显示模态对话框。这是我的index.html页面
<!doctype html>
<html lang="en" ng-app="app">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body ng-controller="Controller">
<button type="button" class="btn btn-info" ng-click="open()">Open</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="lib/angular.js"></script>
<script src="lib/ui-bootstrap-tpls.js"></script>
<script>
angular
.module("app", ["ui.bootstrap"])
.controller("Controller", function ($scope, $uibModal) {
$scope.open = function () {
$uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'modal.template.html',
controller: 'ModalController',
resolve: {
users: function () {
return [
{ id: 1, name: "aaa" },
{ id: 2, name: "bbb" },
{ id: 3, name: "ccc" }
];
}
}
}).result.then(
function (result) {
console.log(result);
},
function () {
console.log("Modal dialog dismissed!");
}
);
}
})
.controller("ModalController", function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close("Modal dialog successfully closed!");
}
$scope.cancel = function () {
$uibModalInstance.dismiss("cancel");
}
});
</script>
</body>
</html>
modal.template.html
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Modal Title</h3>
</div>
<div class="modal-body" id="modal-body">
<ul>
<li ng-repeat="user in users">{{user}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="ok()">Ok</button>
<button type="button" class="btn btn-light" ng-click="cancel()">Cancel</button>
</div>
我在控制台中没有看到任何错误,但没有显示模态对话框。
您的代码中存在一些问题:
- 将所有
<script>
标签移动到 head
部分。
ui-bootstrap-tpl
兼容bootstrap3,所以使用v3.3.7
如果你解决了一些问题,这意味着你可以在你的控制器中访问它,但它没有分配给 $scope
。因此,将 users
注入您的控制器并为其赋值。
.controller("Controller", function ($scope, $uibModal, users) {
$scope.users = users;
/* rest of code*/
}
您可以在 this plunker
中看到这些更改的结果
我已经看到这个问题了:AngularJS bootstrap.ui modal not showing 。但是这些答案中的任何一个都没有帮助我。
我正在尝试使用 ui.bootstrap
模块显示模态对话框。这是我的index.html页面
<!doctype html>
<html lang="en" ng-app="app">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body ng-controller="Controller">
<button type="button" class="btn btn-info" ng-click="open()">Open</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="lib/angular.js"></script>
<script src="lib/ui-bootstrap-tpls.js"></script>
<script>
angular
.module("app", ["ui.bootstrap"])
.controller("Controller", function ($scope, $uibModal) {
$scope.open = function () {
$uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'modal.template.html',
controller: 'ModalController',
resolve: {
users: function () {
return [
{ id: 1, name: "aaa" },
{ id: 2, name: "bbb" },
{ id: 3, name: "ccc" }
];
}
}
}).result.then(
function (result) {
console.log(result);
},
function () {
console.log("Modal dialog dismissed!");
}
);
}
})
.controller("ModalController", function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close("Modal dialog successfully closed!");
}
$scope.cancel = function () {
$uibModalInstance.dismiss("cancel");
}
});
</script>
</body>
</html>
modal.template.html
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Modal Title</h3>
</div>
<div class="modal-body" id="modal-body">
<ul>
<li ng-repeat="user in users">{{user}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="ok()">Ok</button>
<button type="button" class="btn btn-light" ng-click="cancel()">Cancel</button>
</div>
我在控制台中没有看到任何错误,但没有显示模态对话框。
您的代码中存在一些问题:
- 将所有
<script>
标签移动到head
部分。 ui-bootstrap-tpl
兼容bootstrap3,所以使用v3.3.7如果你解决了一些问题,这意味着你可以在你的控制器中访问它,但它没有分配给
$scope
。因此,将users
注入您的控制器并为其赋值。.controller("Controller", function ($scope, $uibModal, users) { $scope.users = users; /* rest of code*/ }
您可以在 this plunker
中看到这些更改的结果