AngularJS 如何为 Bootstrap 模态创建可重用的模板 [英] AngularJS how to create a reusable template for Bootstrap modal
问题描述
所以我使用的是 AngularJS Bootstrap 模式 (http://angular-ui.github.io/bootstrap/).哪个工作正常,但我想知道我是否可以创建一个可以接收标题和内容的基本模板.
然后它会用这些信息填充我的模板.模板将有一个关闭按钮、取消按钮、叠加层等.有没有一种简单的方法可以做到这一点 AngularJS?
这是从示例中获取的,它是关于我所拥有的.我的内容在 templateUrl 中.传入模态模板会很好,这样我就不必为我创建的每个模态重新创建标题和关闭按钮.
var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器:ModalInstanceCtrl,尺寸:尺寸,解决: {项目:函数(){返回 $scope.items;}}});
找到了一种使用指令来实现的方法.它打开一个带有模板的自定义指令的模态.然后,您在模态中拥有的任何内容都将插入到您的自定义模板中.这很好,因为它包含的不仅仅是一条消息.它可以填充表格、警报或任何您想要的内容.
这是我的指令:
app.directive('modalDialog', function() {返回 {限制:'E',替换:真的,转置:真实,链接:功能(范围){scope.cancel = function() {scope.$dismiss('cancel');};},模板:"+"<div class='modal-header'>"+<h3 ng-bind='dialogTitle'></h3>"+"<div ng-click='cancel()'>X</div>"+</div>"+"<div class='modal-body' ng-transclude></div>"+</div>"};});模态('yourTemplate.html'):
<div>您的正文/消息 </div></modal-dialog>
Javascript:
app.controller('YourController', ['$scope', '$modal', function($scope, $modal) {$scope.openModal = 函数 () {$modal.open({templateUrl: 'yourTemplate.html',控制器:模态控制器});};}]);var ModalController = function ($scope, $modalInstance) {$scope.dialogTitle = '你的标题';};
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.
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?
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.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
解决方案 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'):
<modal-dialog>
<div> Your body/message </div>
</modal-dialog>
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';
};
这篇关于AngularJS 如何为 Bootstrap 模态创建可重用的模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文