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

Jrain 发布于2019-08-22 11:16 / 919人阅读

摘要：提供唯一的方法配置。即文件名，在同一个页面有多个不同业务的模态框的情况下很方便点击确认按钮执行的代码可以从中获取和字段进一步操作发起请求等点击取消按钮执行的代码

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


    标题



    
      确认信息：
      
    
    
      备注信息：

页面触发代码：

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

使用ui.bootstrap提供的服务$uibModal来创建模态框，只需要简单的配置模态框视图和控制器。$uibModal提供唯一的方法open(options)配置。

options参数：
animation (Type: boolean, Default: true) 模态框打开/关闭动画控制
appendTo (Type: angular.element, Default: body) 指定将模态框代码插入位置，默认插入到body
backdrop (Type: boolean|string, Default: true) 遮罩层显示控制
backdropClass (Type: string) 给遮罩层添加额外class
bindToController (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());
      });
    };

GPU云服务器云服务器在php中使用组件怎样在oss中使用带ip限制的访问控制 webrtc如何在web中使用在php中如何使用n

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92090.html

angularjs+requirejs实现按需加载的全面实践

摘要：想同时实现这些目标，就必须有一套按需加载的机制，页面上展现的内容和所有需要依赖的文件，都可以根据业务逻辑需要按需加载。最近都是基于做开发，所以本文主要围绕提供的各种机制，探索全面实现按需加载的套路。注意必须设置，否则变化以后，不截获。在进行有一定规模的项目时，通常希望实现以下目标：1、支持复杂的页面逻辑（根据业务规则动态展现内容，例如：权限，数据状态等）；2、坚持前后端分离的基本原则...

TerryCai 2019-08-19 17:39 评论0 收藏0
使用gulp+bower构建Angular.js项目

摘要：本文重点是详细介绍项目的构建。是优秀的自动化项目构建工具，我们将用它完成等文件的的测试检查合并压缩格式化浏览器自动刷新部署文件生成，并监听文件在改动后重复指定的这些步骤热重载。是项目依赖管理工具。环境需求运行在环境，首先安装。本文重点是详细介绍Angular.js项目的构建。gulp是优秀的自动化项目构建工具，我们将用它完成 javascript/less/css/html/imag...

roland_reed 2019-08-20 18:04 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

vslam 2019-08-30 15:53 评论0 收藏0