Javascript AngularJS 如何为 Bootstrap 模态创建可重用的模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25688245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS how to create a reusable template for Bootstrap modal
提问by Dragonfly
So I am using the AngularJS Bootstrap modal (http://angular-ui.github.io/bootstrap/). Which is working fine but I was wondering if I could create a basic template that can take in a title and the content.
所以我使用的是 AngularJS Bootstrap 模式（http://angular-ui.github.io/bootstrap/）。哪个工作正常，但我想知道我是否可以创建一个可以接收标题和内容的基本模板。
Then it would populate my template with these info. The template would have a close button, cancel button, overlay, etc. Is there an easy way to do this AngularJS?
然后它会用这些信息填充我的模板。该模板将有一个关闭按钮、取消按钮、覆盖等。有没有一种简单的方法可以做到这一点 AngularJS？
This is taken from the example and it's about what I have. My content is in the templateUrl. It would be nice to pass in the modal template so I don't have to keep recreating the title and close buttons for every modal I create.
这是从示例中获取的，它与我所拥有的有关。我的内容在 templateUrl 中。传入模态模板会很好，这样我就不必为我创建的每个模态重新创建标题和关闭按钮。
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
采纳答案by Dragonfly
Found a way to do it with directives. It opens up a modal with a custom directive that has a template. Then whatever you have in your modal will be inserted into your custom template. This is nice because it holds more than just a message. It can be filled with forms, alert, or anything you want.
找到了一种使用指令来做到这一点的方法。它打开一个带有模板的自定义指令的模态。然后，您在模态中拥有的任何内容都将插入到您的自定义模板中。这很好，因为它包含的不仅仅是一条消息。它可以填充表格、警报或任何您想要的内容。
This was my directive:
这是我的指示：
app.directive('modalDialog', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
link: function(scope) {
scope.cancel = function() {
scope.$dismiss('cancel');
};
},
template:
"<div>" +
"<div class='modal-header'>" +
"<h3 ng-bind='dialogTitle'></h3>" +
"<div ng-click='cancel()'>X</div>" +
"</div>" +
"<div class='modal-body' ng-transclude></div>" +
"</div>"
};
});
Modal ('yourTemplate.html'):
模态（'yourTemplate.html'）：
<modal-dialog>
<div> Your body/message </div>
</modal-dialog>
Javascript:
Javascript：
app.controller('YourController', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function () {
$modal.open({
templateUrl: 'yourTemplate.html',
controller: ModalController
});
};
}]);
var ModalController = function ($scope, $modalInstance) {
$scope.dialogTitle = 'Your title';
};
回答by alpinescrambler
Checkout John Papa's Hot Towel Angular BootStrap "template". You can pick it up from there:
查看 John Papa 的 Hot Towel Angular BootStrap“模板”。你可以从那里拿起它：
