angularJS模态框$modal实例代码


Posted in Javascript onMay 27, 2017

1.引入$modal模块

如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]);

2.执行调模态框 函数

$scope.editModule = function(type, size, id) { 
  $scope.id = id; 
  var modalInstance = $modal.open({ 
    templateUrl: 'tpl/weichat_modulebaseinfo.html', //template:'html元素模板', 
    controller: 'EditModuleCtrl', // 初始化模态范围 
    size: size, //大小配置 
    scope: '一个作用域为模态的内容使用($modal会创建一个当前作用域的子作用域,scope可有可无)默认为$rootScope', 
    resolve: { 
      items: function() { 
        return $scope.id; //向模态框控制器中传值 
      } 
    } 
    background: '', //控制背景,true(有) or false(无),static背景存在,但是点击模态窗口之外,模态窗不关闭 
    keyboard: '', //按下Esc时,模态对话框是否关闭,默认为ture 
    windowClass: '' //指定一个class并被添加到模态窗口中 
 
  }); 
 
  modalInstance.result.then(function(selectedItem) { //模态框关闭后返回函数,selectedItem为返回值 
 
  }) 
}

3.创建模态框控制器

app.controller('EditModuleCtrl', ['$scope', '$modalInstance', 'BookService', '$stateParams', 'items', function($scope, $modalInstance, BookService, $stateParams, items) { //依赖于modalInstance 
    //items为传过来的值 
    $scope.modalBack = function() { 
      //执行模态框内部操作 
    } 
 
    $scope.ok = function() { 
      $modalInstance.close($scope.textid); //关闭并返回当前选项 
    }; 
    $scope.cancel = function() { 
      $modalInstance.dismiss('cancel'); // 退出不执行任何操作 
    } 
  }])

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
Javascript 按位与运算符 (&)使用介绍
Feb 04 Javascript
JavaScript事件委托实例分析
May 26 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
Angular.js自动化测试之protractor详解
Jul 07 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 #Javascript
AngularJS入门教程一:路由用法初探
May 27 #Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 #Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 #Javascript
Angularjs自定义指令Directive详解
May 27 #Javascript
react-redux中connect()方法详细解析
May 27 #Javascript
react-router实现跳转传值的方法示例
May 27 #Javascript
You might like
php中的一些数组排序方法分享
2012/07/20 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
js实现简单页面全屏
2019/09/17 Javascript
python 布尔操作实现代码
2013/03/23 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python编程实现正则删除命令功能
2017/08/30 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
详解用python写一个抽奖程序
2019/05/10 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
小学生中国梦演讲稿
2014/04/23 职场文书
好学生评语大全
2014/05/05 职场文书
公务员诚信承诺书
2014/05/26 职场文书
高中课程设置方案
2014/05/28 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
python开发人人对战的五子棋小游戏
2022/05/02 Python