How to pass html markup to ui bootstrap modal?
Question
I have many modal sources in separated html s.
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. :)
1 answers
solution1
1 ACCPTED 2017-10-18 10:35:51
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 byngInclude,ngView, or directives. The type of the<script>element must be specified astext/ng-template, and a cache name for the template must be assigned through the element'sid, which can then be used as a directive'stemplateUrl.
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="angular.js@1.5.5" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular.min.js"></script> <script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular-animate.js"></script> <script data-require="ui-bootstrap@1.3.2" 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>
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.