如何在angular.js中优雅的使用ui.bootstrap的modal组件

前端之家收集整理的这篇文章主要介绍了如何在angular.js中优雅的使用ui.bootstrap的modal组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ui.bootstrap的modal组件可以很方便地实现页面controller与模态框controller之间通信,特别是弹出的模态框中有比较复杂的表格信息需要用户填写,下面切入主题

注册全局模态框实例的controller

  1. angular.module('myApp.Controllers',[
  2. 'ui.bootstrap'
  3. ])
  4. .controller('appModalInstanceCtrl',function ($scope,$uibModalInstance,modalDatas) {
  5. var $ctrl = this;
  6. $scope.modalDatas = modalDatas; //双向绑定,方便在确认中回传可能修改的字段
  7. // $ctrl.insta
  8. $ctrl.ok = function (val) {
  9. $scope.modalDatas.result = val;
  10. $uibModalInstance.close(
  11. $scope.modalDatas //在模态框View中修改的值传递回去,view中可以直接添加属性
  12. );
  13. };
  14. $ctrl.cancel = function () {
  15. $uibModalInstance.dismiss('cancel');
  16. };
  17. })

新建模板文件src/templates/modalViews/confirm.html

  1. <div class="modal-header">
  2. <h3 class="modal-title">标题</h3>
  3. </div>
  4.  
  5. <div class="modal-body">
  6. <p class="content">
  7. <label class="label">确认信息:</label>
  8. <input type="text" ng-model="modalDatas.msg">
  9. </p>
  10. <p class="content">
  11. <label class="label">备注信息:</label>
  12. <input type="text" ng-model="modalDatas.content">
  13. </p>
  14. </div>
  15.  
  16. <div class="modal-footer">
  17. <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">确定</button>
  18. <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">取消</button>
  19. </div>

页面触发代码

  1. <button type='button' class='btn btn-primary' ng-click="openModal('md','confirm')">打开'confirm' modal</button>

管理页面出发代码的controller中注册openModal函数

  1. $scope.openModel = function (size,type) {
  2. //type即view文件名,在同一个页面有多个不同业务的模态框的情况下很方便
  3. var tplUrl = './src/templates/modalViews/' + type + '.html';
  4. $scope.modalDatas = {
  5. msg: 'Hello World!'
  6. };
  7.  
  8. var modalInstance = $uibModal.open({
  9. animation: true,ariaLabelledBy: 'modal-title',ariaDescribedBy: 'modal-body',templateUrl: tplUrl,controller: 'appModalInstanceCtrl',controllerAs: '$ctrl',size: size,resolve: {
  10. modalDatas: function () {
  11. return $scope.modalDatas;
  12. }
  13. }
  14. });
  15. modalInstance.result.then(function (datas) {
  16. // 点击确认按钮执行的代码
  17. //可以从datas中获取msg和content字段
  18. //进一步操作:发起http请求等
  19. },function () {
  20. // 点击取消按钮执行的代码
  21. console.info('Modal dismissed at: ' + new Date());
  22. });
  23. };

猜你在找的Angularjs相关文章