Question

我想创建弹出窗口来显示一些信息。我正在使用routing.My代码运行良好，当我运行代码没有路由。但是当我运行代码与路由模板和控制器没有错误，但我的代码是当用户点击按钮时，它不显示弹出窗口。我想在用户点击按钮时显示弹出窗口。

    <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.

Answer 1

您应该只使用一个 ng-app ，让我们说演示应用，然后将 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>

angularjs popup无法使用路由模板和控制器

1 个答案: