Всплывающее окно angularjs не работает с шаблоном маршрутизации и контроллером

Question

Всплывающее окно angularjs не работает с шаблоном маршрутизации и контроллером

0

Я хочу создать всплывающее окно, чтобы отобразить некоторую информацию. Я использую 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="/jquery.min.js"></script>
    <script src="/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.

Mohit 23 июль 2016, в 14:39

Источник

Теги:

angularjs

html5

css3

bootstrap-modal

angular-ui-bootstrap

1 ответ

Ещё вопросы

daymosik · Answer 1 · 2016-07-23T10-52-00.000Z

Вы должны использовать только одно 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="/jquery.min.js"></script>
  <script src="/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>

Привет! Я внес изменение, но выдает ошибку Uncaught Error: [$ injector: modulerr] errors.angularjs.org/1.5.7/$injector/…… 0% 20% 20at% 20c% 20 (http% 3A% 2F % 2Flocalhost% 3A8080% 2F///angular.min.js% 3A20% 3A359)
Привет, я отредактировал мой код. Пожалуйста, пройдите его. Если что-то еще вы хотите узнать, пожалуйста, спросите.