Skip to main content
deleted 21 characters in body; edited tags; edited title
Source Link
Jamal
  • 34.9k
  • 13
  • 133
  • 237

AngularJS: Bootstrap Modals

I am learning how to implement Bootstrap modals in AngularJS. I can do it when the modal code (the actual popup window code) is on the main page, but I want to be able to display external files so that my SPA isn't super-cluttered. I am implementing this on a much larger scale, but for simplicity's sake I'll keep the code example to a minimum.

<html>
  <head>
    <meta charset='utf-8'>
    <script src="js/angular.js"></script>
    <script src="js/angular-ui-bootstrap-modal.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body ng-app="MyApp" ng-controller="MyCtrl">

    <button class="btn" ng-click="open()">Open Modal</button>

    <!-- want this code to be an external.html file -->

    <div modal="showModal" close="cancel()">
      <div class="modal-header">
          <h4>Modal Dialog</h4>
      </div>
      <div class="modal-body">
          <p>Example paragraph with some text.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </div>

    <!-- -->

  </body>
</html>

And the app.js code.app.js

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller("MyCtrl", function($scope) {

  $scope.open = function() {
    $scope.showModal = true;
  };

  $scope.ok = function() {
    $scope.showModal = false;
  };

  $scope.cancel = function() {
    $scope.showModal = false;
  };

});

I know that I need to add a templateUrl to my app.jsapp.js, but don't know how I would bridge the gap between the three files (index.htmlindex.html, app.jsapp.js, and external.htmlexternal.html).

AngularJS: Bootstrap Modals

I am learning how to implement Bootstrap modals in AngularJS. I can do it when the modal code (the actual popup window code) is on the main page, but I want to be able to display external files so that my SPA isn't super-cluttered. I am implementing this on a much larger scale, but for simplicity's sake I'll keep the code example to a minimum.

<html>
  <head>
    <meta charset='utf-8'>
    <script src="js/angular.js"></script>
    <script src="js/angular-ui-bootstrap-modal.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body ng-app="MyApp" ng-controller="MyCtrl">

    <button class="btn" ng-click="open()">Open Modal</button>

    <!-- want this code to be an external.html file -->

    <div modal="showModal" close="cancel()">
      <div class="modal-header">
          <h4>Modal Dialog</h4>
      </div>
      <div class="modal-body">
          <p>Example paragraph with some text.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </div>

    <!-- -->

  </body>
</html>

And the app.js code.

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller("MyCtrl", function($scope) {

  $scope.open = function() {
    $scope.showModal = true;
  };

  $scope.ok = function() {
    $scope.showModal = false;
  };

  $scope.cancel = function() {
    $scope.showModal = false;
  };

});

I know that I need to add a templateUrl to my app.js, but don't know how I would bridge the gap between the three files (index.html, app.js, and external.html).

Bootstrap Modals

I am learning how to implement Bootstrap modals in AngularJS. I can do it when the modal code (the actual popup window code) is on the main page, but I want to be able to display external files so that my SPA isn't super-cluttered. I am implementing this on a much larger scale, but for simplicity's sake I'll keep the code example to a minimum.

<html>
  <head>
    <meta charset='utf-8'>
    <script src="js/angular.js"></script>
    <script src="js/angular-ui-bootstrap-modal.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body ng-app="MyApp" ng-controller="MyCtrl">

    <button class="btn" ng-click="open()">Open Modal</button>

    <!-- want this code to be an external.html file -->

    <div modal="showModal" close="cancel()">
      <div class="modal-header">
          <h4>Modal Dialog</h4>
      </div>
      <div class="modal-body">
          <p>Example paragraph with some text.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </div>

    <!-- -->

  </body>
</html>

app.js

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller("MyCtrl", function($scope) {

  $scope.open = function() {
    $scope.showModal = true;
  };

  $scope.ok = function() {
    $scope.showModal = false;
  };

  $scope.cancel = function() {
    $scope.showModal = false;
  };

});

I know that I need to add a templateUrl to my app.js, but don't know how I would bridge the gap between the three files (index.html, app.js, and external.html).

Source Link
UltraSonja
  • 281
  • 1
  • 5

AngularJS: Bootstrap Modals

I am learning how to implement Bootstrap modals in AngularJS. I can do it when the modal code (the actual popup window code) is on the main page, but I want to be able to display external files so that my SPA isn't super-cluttered. I am implementing this on a much larger scale, but for simplicity's sake I'll keep the code example to a minimum.

<html>
  <head>
    <meta charset='utf-8'>
    <script src="js/angular.js"></script>
    <script src="js/angular-ui-bootstrap-modal.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body ng-app="MyApp" ng-controller="MyCtrl">

    <button class="btn" ng-click="open()">Open Modal</button>

    <!-- want this code to be an external.html file -->

    <div modal="showModal" close="cancel()">
      <div class="modal-header">
          <h4>Modal Dialog</h4>
      </div>
      <div class="modal-body">
          <p>Example paragraph with some text.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </div>

    <!-- -->

  </body>
</html>

And the app.js code.

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller("MyCtrl", function($scope) {

  $scope.open = function() {
    $scope.showModal = true;
  };

  $scope.ok = function() {
    $scope.showModal = false;
  };

  $scope.cancel = function() {
    $scope.showModal = false;
  };

});

I know that I need to add a templateUrl to my app.js, but don't know how I would bridge the gap between the three files (index.html, app.js, and external.html).