ui.bootstrap的modal组件可以很方便地实现页面controller与模态框controller之间通信,特别是弹出的模态框中有比较复杂的表格信息需要用户填写,下面切入主题:
注册全局模态框实例的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
- <div class="modal-header">
- <h3 class="modal-title">标题</h3>
- </div>
- <div 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>
- </div>
- <div 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>
- </div>
- <button type='button' class='btn btn-primary' ng-click="openModal('md','confirm')">打开'confirm' modal</button>
在管理页面出发代码的controller中注册openModal函数
- $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());
- });
- };