[英]How to pass <select> html data in bootstrap modal to jquery
[英]How to pass html markup to ui bootstrap modal?
我在单独的html
有许多模态源。
而且我不想制作每个 html 的模态。
在这种情况下,如何将模态的 html 代码传递到 ui-bootstrap 中?
上面的链接和我想要做的完全一样。
还有@BennettAdams 的回答,它几乎可以帮助我,
但他没有解释他的第二种方式。
我想要一些第二种方式的例子。
由于您已经使用了链接到的 plunker,您可以将模板放在 script type="text/ng-template" 标签中,并在模态配置中引用其 id 属性的值。
在此先感谢,请帮助我。 :)
这里的想法是使用脚本标签的 id 作为模态的templateUrl
。 从文档:
将
<script>
元素的内容加载到$templateCache
,以便模板可以被ngInclude
、ngView
或指令使用。<script>
元素的类型必须指定为text/ng-template
,text/ng-template
的缓存名称必须通过元素的id
分配,然后可以用作指令的templateUrl
。
工作示例:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.