我想创建弹出窗口来显示一些信息。我正在使用路由。当我在没有路由的情况下运行代码时，我的代码运行良好。但当我用路由模板和控制器运行代码时，没有错误，但我的代码不起作用。当用户点击按钮时，它不会显示弹出窗口。我想要当用户点击按钮时弹出显示。
<html ng-app="Demo">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<link href="mystyle.css" rel="stylesheet">
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-default" style="background-color:black;">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#/home" style="color:white;">Home </a></li>
<li><a href="#/product" style="color:white;">Product</a></li>
<li><a href="#/students" style="color:white;">About Us</a></li>
<li><a href="#/students" style="color:white;">Contact </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<ng-view></ng-view>
</body>
</html>
script.js
var app = angular.module("Demo",['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/home",{
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/product",{
templateUrl: "Templates/product.html",
controller: "coursesController"
})
.when("/students",{
templateUrl: "Templates/students.html",
controller: "studentsController"
})
})
angular.module('PopupDemo', ['ui.bootstrap']);
angular.module('PopupDemo').controller('homeController', ['$scope','$modal',function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
controller: 'PopupCont',
templateUrl: 'Popup.html',
});
}
}])
.controller('PopupCont', ['$scope','$modalInstance',function ($scope, $modalInstance) {
$scope.close = function () {
$modalInstance.dismiss('cancel');
};
}]);
app.controller("coursesController",function($scope){
$scope.courses = ["C#","VB.NET","SQL Server","ASP.NET","hi","hello"];
})
app.controller("studentsController",function($scope){
$scope.students = ["C#","VB.NET","SQL Server","ASP.NET"];
})
home.html
<meta charset="UTF-8">
<title>Angularjs popup</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="script.js"></script>
<div ng-app="PopupDemo">
<div ng-controller="homeController">
{{message1}}
<center><h2>Angularjs-Popup</h2></center>
<center><button ng-click="open()" class="btn btn-warning">Popup With Close</button></center>
</div>
</div>
Popup.html
<html>
<head>
</head>
<body>
<div class="modal-header">
<h3 class="modal-title">Header</h3>
</div>
<div class="modal-body">
Popup example with close button
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
ng-click="close()">Close</button>
</div>
</body>
</html>
Help me please thanks in advance.
您应该只使用一个ng应用程序，比如Demo应用程序，并向其注入PopupDemo块。尝试：
<html ng-app="Demo">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="ui-bootstrap-tpls-0.14.3.min.js"></script>
<link href="mystyle.css" rel="stylesheet">
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-default" style="background-color:black;">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#/home" style="color:white;">Home </a></li>
<li><a href="#/product" style="color:white;">Product</a></li>
<li><a href="#/students" style="color:white;">About Us</a></li>
<li><a href="#/students" style="color:white;">Contact </a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<ng-view></ng-view>
</body>
</html>
script.js
<script>
var app = angular.module('Demo', ['ngRoute', 'PopupDemo'])
.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/home", {
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/product", {
templateUrl: "Templates/product.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController"
})
});
angular.module('PopupDemo', ['ui.bootstrap']);
angular.module('PopupDemo').controller('homeController', ['$scope', '$modal', function($scope, $modal) {
$scope.open = function() {
var modalInstance = $modal.open({
controller: 'PopupCont',
templateUrl: 'Popup.html',
});
}
}]);
app.controller("coursesController", function($scope) {
$scope.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET", "hi", "hello"];
})
app.controller("studentsController", function($scope) {
$scope.students = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
})
</script>
home.html
<div>
<div ng-controller="homeController">
{{message1}}
<center>
<h2>Angularjs-Popup</h2></center>
<center>
<button ng-click="open()" class="btn btn-warning">Popup With Close</button>
</center>
</div>
</div>