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="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
<script data-require="ui-bootstrap@1.3.2" 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
Yep, you have a few options for indicating which content the modal will load.
type="text/ng-template"
tag and reference the value of its id
attribute in your modal config. 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\\'ma 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.
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="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
<script data-require="ui-bootstrap@1.3.2" 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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.