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?

回答1:

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

回答2:

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