我正在使用 UI Bootstrap 来创建模式对话框。如果我使用“templateUrl”并使用“ng-template”来包含 html 模板，它就可以正常工作。但由于我有多个模式对话框，使用“ng-template”在页面中包含所有 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');
};
});
有什么方法可以直接使用 HTML 标记而不是使用“templateUrl”吗？ 或者至少有一种方法可以将 html 模板保存在单独的文件中，而不是使用 ng-template 将其包含在页面中？ 这是工作示例: http://plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview
最佳答案
是的，您有几个选项来指示模式将加载哪些内容。
- 正如 @Wes 在他的 plunker fork 中回答和演示的那样，您可以在应用程序中的某个位置创建一个外部 html 文件，只要指定文件的正确路径，模式就会按预期工作。
- 由于您已经使用了链接到的 plunker，因此您可以将模板放入脚本
type="text/ng-template"标记中，并引用其id 的值模式配置中的属性。 最后一种方法是将 html 内联到模式配置中。 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 });
此方法工作得很好，但编写、读取和维护可能有点麻烦，具体取决于模板中标记的数量。
关于javascript - 如何在 UI 引导模式中传递 HTML 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37603057/