【发布时间】:2022-01-26 17:14:29
【问题描述】:
我们必须更新 Bootstrap 版本(bs3 到 bs4)。我们对 Angularjs modal 有一些问题。它仅适用于 bs3.4.1 版本,甚至不适用于 3.4.2。下面是一段类似的代码,问题是, 看起来模板已添加到 dom,但模态不会出现并且表现得像模态。我怎么解决这个问题。任何帮助将不胜感激。
<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$modal", function($scope, $uibModal){
$scope.click = function(){
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
}]);
app.controller("modal", modal);
function modal() {
console.log("in modal controller")
}
</script>
</head>
<body>
<div ng-app="app" ng-controller="democontroller">
<button type="button" class="btn btn-default" ng-click="click()">
Open modal
</button>
<script type="text/ng-template" id="modal.html">
<h1>modal</h1>
</script>
</div>
</body>
</html>
【问题讨论】:
标签: angularjs bootstrap-modal angular-ui-bootstrap