CODEWITHSUNDEEP
htmlangularjsangular-ui-bootstrapbootstrap-modal
Canet Robern
Canet Robern

Reputation: 1069

How to pass html markup to ui bootstrap modal?

I have many modal sources in separated htmls.

And I don't wanna make each html of modals.

In this case how can I pass my html code of modal into ui-bootstrap?

How to pass HTML markup in UI bootstrap modal

Above link is exactly same as what I want to do.

And there are answer of @BennettAdams, it could help me almost,

but he did not explain of his second way.

I want some example of second way.

As you already have working the the plunker you linked to, you can put the template inside a script type="text/ng-template" tag and reference the value of its id attribute in your modal config.

Thanks in advance, please help me. :)

Upvotes: 1

Views: 550

Answers (1)

Stanislav Kvitash
Stanislav Kvitash

Reputation: 4622

The idea here is to use the id of script tag as templateUrl of modal. From the docs:

Load the content of a <script> element into $templateCache, so that the template can be used by ngInclude, ngView, or directives. The type of the <script> element must be specified as text/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive's templateUrl.

Working example:

angular.module('mydemo', ['ngAnimate', 'ui.bootstrap']);
angular.module('mydemo').controller('myCtrl', function ($scope, $uibModal, $log) {

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      templateUrl: 'modalTemplate.html',
      controller: 'ModalInstanceCtrl',
      size: size
    });
  };
});

angular.module('mydemo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});
<!DOCTYPE html>
<html ng-app="mydemo">

<head>
  <script data-require="[email protected]" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular.min.js"></script>
  <script data-require="[email protected]" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular-animate.js"></script>
  <script data-require="[email protected]" data-semver="1.3.2" src="//cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <div ng-controller="myCtrl">
    <button type="button" class="btn btn-default" ng-click="open('lg')">Show modal</button>
  </div>

</body>

<script type="text/ng-template" id="modalTemplate.html"><h1>Helo from ng-template!</h1></script>
 
</html>

Upvotes: 1

Related Questions