如何在angular.js中优雅的使用ui.bootstrap的modal组件
注册全局模态框实例的controller
angular.module('myApp.Controllers', [ 'ui.bootstrap' ]) .controller('appModalInstanceCtrl', function ($scope,$uibModalInstance,modalDatas) { var $ctrl = this; $scope.modalDatas = modalDatas; //双向绑定,方便在确认中回传可能修改的字段 // $ctrl.insta $ctrl.ok = function (val) { $scope.modalDatas.result = val; $uibModalInstance.close( $scope.modalDatas //在模态框View中修改的值传递回去,view中可以直接添加属性 ); }; $ctrl.cancel = function () { $uibModalInstance.dismiss('cancel'); }; })
新建模板文件src/templates/modalViews/confirm.html
<p class="modal-header"> <h3 class="modal-title">标题</h3> </p> <p class="modal-body"> <p class="content"> <label class="label">确认信息:</label> <input type="text" ng-model="modalDatas.msg"> </p> <p class="content"> <label class="label">备注信息:</label> <input type="text" ng-model="modalDatas.content"> </p> </p> <p class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">确定</button> <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">取消</button> </p>
页面触发代码:
<button type='button' class='btn btn-primary' ng-click="openModal('md', 'confirm')">打开'confirm' modal</button>
在管理页面出发代码的controller中注册openModal函数
使用ui.bootstrap提供的服务$uibModal
来创建模态框,只需要简单的配置模态框视图和控制器。$uibModal
提供唯一的方法open(options)
配置。(想看更多就到PHP中文网AngularJS开发手册中学习)
options
参数:animation
(Type: boolean, Default: true) 模态框打开/关闭动画控制appendTo
(Type: angular.element, Default: body) 指定将模态框代码插入位置,默认插入到bodybackdrop
(Type: boolean|string, Default: true) 遮罩层显示控制backdropClass
(Type: string) 给遮罩层添加额外classbindToController
(Type: boolean, Default: false) - 当使用 controllerAs
(比如设置为$ctrl) 并且此属性设置为true时,可以把$scope绑定到controller.主意$scope是能够管理模态框的scope,也就是说,如果模态框默认插入到body,那么会将管理body标签的控制器绑定到$ctrl,所以最好结合appendTo
一起使用。component
(Type: string, Example: myComponent) 将模态框当做组件方式使用controller
(Type: function|string|array, Example: MyModalController) 指定模态框控制器controllerAs
(Type: string, Example: ctrl) 控制器别名resolve
(Type: Object) - 给模态框传递数据;
templateUrl (Type: string) 指定模态框视图层模板size
(Type: string, Example: lg) 指定模态框大小
还有很多属性,可以到官网查询,比如控制多层模态框等等。
$scope.openModel = function (size, type) { //type即view文件名,在同一个页面有多个不同业务的模态框的情况下很方便 var tplUrl = './src/templates/modalViews/' + type + '.html'; $scope.modalDatas = { msg: 'Hello World!' }; var modalInstance = $uibModal.open({ animation: true, ariaLabelledBy: 'modal-title', ariaDescribedBy: 'modal-body', templateUrl: tplUrl, controller: 'appModalInstanceCtrl', controllerAs: '$ctrl', size: size, resolve: { modalDatas: function () { return $scope.modalDatas; } } }); modalInstance.result.then(function (datas) { // 点击确认按钮执行的代码 //可以从datas中获取msg和content字段 //进一步操作:发起http请求等 }, function () { // 点击取消按钮执行的代码 console.info('Modal dismissed at: ' + new Date()); }); };
好了,本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。
以上就是如何在angular.js中优雅的使用ui.bootstrap的modal组件的详细内容,更多请关注其它相关文章!