2
\$\begingroup\$

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

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

You're missing the configuration for the modal:

From Angular Bootstrap Documentation:

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

Where your 

templateUrl

attribute will be 

external.html

Don't worry for how it works, you just should know that the modal library does it !

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.