如何在UI引导模式中传递HTML标记 [英] How to pass HTML markup in UI bootstrap modal
问题描述
我正在使用UI引导程序创建模式对话框.如果我使用"templateUrl"并使用"ng-template"包含html模板，则效果很好.但是由于我有多个模式对话框，因此在使用"ng-template"将页面中的所有html模板都包含进去之后，我的页面越来越大.
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".
代码如下: 的HTML
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:
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');
};
});
有什么方法可以直接使用HTML标记而不是使用"templateUrl"? 还是至少有一种方法可以将html模板保存在单独的文件中，而不是使用ng-template将其包含在页面中? 这是工作示例: http://plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview
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.
- 正如@Wes在他的pl子叉中回答并演示的那样，您可以在应用程序中的某个位置创建一个外部html文件，只要您指定该文件的正确路径，该模式即可按预期工作.
- 您已经在使用链接的插件，您可以将模板放在脚本
type="text/ng-template"标记中，并在模态配置中引用其id属性的值. -
最后一种方法是在模式配置中内联html. 这是您的朋克派生者，其html直接作为字符串添加到了模式配置的
template属性中.
- 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.
- 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 itsidattribute 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
templateproperty 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.
这篇关于如何在UI引导模式中传递HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
