AngularJS - include external html file into modals

Question

I m working with AngularJS and I have an html page which contain several bootstrap modals. This html file starts to be a bit heavy with all these modals.

Is it possible to include into these modals external html files without loosing the scope?

Answer 1

If you use the Angular UI Bootstrap lib, you can set any template URL when opening a modal: http://angular-ui.github.io/bootstrap/

$modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl'
});

Not only is it possible, but recommended, because it is likely that currently you have all your modals into the same page with some ng-show/ng-if to toggle them: this gives you a heavier DOM and/or a longer $scope digestion.

Answer 2

Using the templateUrl property or the SCRIPT tag id attribute to point to an external HTML file (without creating a custom templates folder) seems to work in a recent Firefox (46.0), but not in Chrome (49.0) or Opera (36.0). So inline templates still appear to be safer for now.

Answer 3

Follow this:

 $scope.open = function (vehicle) {
  var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
   resolve: {
    items: function () {
    return $scope.items;
    }
  }
 });
};

MODAL CONTENT

<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
    <h3 class="modal-title">Modal!</h3>
</div>
<div class="modal-body">
    <div >Body</div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="$close('awesome')">OK</button>
    <button class="btn btn-warning" ng-click="$dismiss('nah')">Cancel</button>
</div>
</script>

HTML

<a data-ng-click="open(vehicle)" href=""><span class="glyphicon glyphicon-open"></span>View</a>