繁体   English   中英

如何将 html 标记传递给 ui bootstrap 模式?

[英]How to pass html markup to ui bootstrap modal?

我在单独的html有许多模态源。

而且我不想制作每个 html 的模态。

在这种情况下,如何将模态的 html 代码传递到 ui-bootstrap 中?

如何在 UI 引导模式中传递 HTML 标记

上面的链接和我想要做的完全一样。

还有@BennettAdams 的回答,它几乎可以帮助我,

但他没有解释他的第二种方式。

我想要一些第二种方式的例子。

由于您已经使用了链接到的 plunker,您可以将模板放在 script type="text/ng-template" 标签中,并在模态配置中引用其 id 属性的值。

在此先感谢,请帮助我。 :)

这里的想法是使用脚本标签的 id 作为模态的templateUrl 文档

<script>元素的内容加载到$templateCache ,以便模板可以被ngIncludengView或指令使用。 <script>元素的类型必须指定为text/ng-templatetext/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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM