CODEWITHSUNDEEP
javascriptangularjsmodal-dialogangular-ui-bootstrap
SatAj
SatAj

Reputation: 1979

How to pass HTML markup in UI bootstrap modal

I am using UI bootstrap to create modal dialog. It works fine if I use "templateUrl" and use "ng-template" to include the html template. But as I have multiple modal dialogs, my page is getting bigger and bigger after including all the html templates in the page using "ng-template".

Here's the code: HTML 

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

<body>
  <div ng-controller="myCtrl">
    <script type="text/ng-template" id="myContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        Modal body content goes here...
      </div>
      <div class="modal-footer">
        <button class="btn" type="button" ng-click="cancel()">Close</button>
      </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Show modal</button>
  </div>

</body>
</html>

Javascript:

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

  $scope.open = function (size) {

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

angular.module('mydemo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

Is there any way I can use HTML markup directly instead of using "templateUrl"? Or atleast a way through which I can keep the html templates in a separate file instead of including it in the page using ng-template? Here's the working example: http://plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview

Upvotes: 0

Views: 6731

Answers (3)

Brian
Brian

Reputation: 5049

Here is one more solution using $templateCache.

A forked plunker is here: http://plnkr.co/edit/ukqmThpvi4aRGLZEiSSe?p=preview

JS - templates.js

var app = angular.module('mydemo');

app.run(function($templateCache){

  $templateCache.put('tplcache/myContent.htm',
    '<div class="modal-header">' +
      '<h3 class="modal-title">I\'m a modal!</h3>' +
      '</div>' +
      '<div class="modal-body">' +
        'Modal body content goes here...' +
      '</div>' +
      '<div class="modal-footer">' +
        '<button class="btn" type="button" ng-click="cancel()">Close</button>' +
      '</div>');

})

JS - modal config

var modalInstance = $uibModal.open({
  templateUrl: 'tplcache/myContent.htm',
  controller: 'ModalInstanceCtrl',
  size: size
});

HTML Scripts (include templates.js after main app)

  <script src="script.js"></script>
  <script src="templates.js"></script>

HTML body

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

Upvotes: 0

Bennett Adams
Bennett Adams

Reputation: 1818

Yep, you have a few options for indicating which content the modal will load.

  1. As @Wes answered and demonstrated in his plunker fork, you can create an external html file somewhere in your application, and as long as you specify the correct path to the file, the modal will work as expected.
  2. 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.

  3. A final way is to inline the html in the modal config. Here's your plunker forked with the html directly added to the template property of the modal config as a string.

    var modalInstance = $uibModal.open({
  template: '<div class="modal-header">' +
              '<h3 class="modal-title">I\'m a modal!</h3>' +
            '</div>' +
            '<div class="modal-body">' +
              'Modal body content goes here...' +
            '</div>' +
            '<div class="modal-footer">' +
              '<button class="btn" type="button" ng-click="cancel()">Close</button>' +
            '</div>',
  controller: 'ModalInstanceCtrl',
  size: size
});

This method works just fine, but it can be a little cumbersome to write, read, and maintain, depending on the amount of markup in the template.

Upvotes: 2

Wes
Wes

Reputation: 172

You can always just use regular html. Updated your plnkr here:

http://plnkr.co/edit/v0BYhg3ojCgy7eiebRvR?p=preview

This just requires you know the path to the HTML file.

  <!DOCTYPE html>
<html ng-app="mydemo">

<head>
  <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
  <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
  <script data-require="[email protected]" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="http://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()">Show modal</button>
  </div>

</body>
</html>

and your new myContent.html

<div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
  </div>
  <div class="modal-body">
    Modal body content goes here...
  </div>
  <div class="modal-footer">
    <button class="btn" type="button" ng-click="cancel()">Close</button>
  </div>

Upvotes: 0

Related Questions