AngularJS: External Modal Templates

I read Agularjs - include external html file into modals, but it didn't include much code or explanation and just pointed to docs that I've read. So, I will go into more detail.

I have a main html file for a SPA (Single Page Application). I want to use modals for more detailed views.

<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 to be in a separate 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 my app.js file:

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;
  };

});

What would I need to add to app.js in order for it to be able to display external html files as modals on my main html page?

I've done this plnkr so as to explain it better

To open the modal defined in a dedicated html template :

1. The following is declared in the controller responsible for the button opening the modal :

$modal.open({
  templateUrl: 'myModalTemplate.html',
  controller: 'MyModalController'
});

2. This is in the controller of the modal :

$scope.ok = function () {
    $modalInstance.close();
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

See also ui bootstrap doc

Please take look the documentation carefully here

You can do something like this with templateUrl

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

来源：https://stackoverflow.com/questions/31597661/angularjs-external-modal-templates

标签

angularjs

twitter-bootstrap

bootstrap-modal