AngularJS中使用ngModal模态框实例


Posted in Javascript onMay 27, 2017

在AngularJS中使用模态框需要引用的文件:

  1. angular.js 1.5.5
  2. ui.bootstrap-tpls.js 0.11.2
  3. bootstrap.css 3.3.7

需要注意版本要一致,高版本的不支持这种方法,会出错

将需要弹出的模态框的内容写在 script 标签中,指明属性,放在页面中

<script type="text/ng-template" id="modal.html"> 
<div>
  <div class="modal-header">
    <h3 class="modal-title" align="center">
      标题信息
    </h3>
  </div>
  <div class="modal-body">
    <div align="center">
      模态框内容
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">
      确认
    </button>
    <button class="btn btn-warning" ng-click="cancel()">
      退出
    </button>
  </div>
</div>
</script>

在App和Controller中注入模态框

var app = angular.module('app', ['ui.bootstrap']);
app.controller('modalController', function($scope, $rootScope,$modal) {
  $scope.openModel = function() {
      var modalInstance = $modal.open({
        templateUrl : 'modal.html',//script标签中定义的id
        controller : 'modalCtrl',//modal对应的Controller
        resolve : {
          data : function() {//data作为modal的controller传入的参数
             return data;//用于传递数据
          }
        }
      })
    }
}

//模态框对应的Controller
app.controller('modalCtrl', function($scope, $modalInstance, data) {
  $scope.data= data;

  //在这里处理要进行的操作  
  $scope.ok = function() {
    $modalInstance.close();
  };
  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  }
});

添加事件触发显示模态框

<button ng-click="openModal()">打开模态框</button>

html

<!DOCTYPE html>
<html ng-app="app" ng-controller="modalController">
<head>
  <title>ng-model模态框</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<body>
<button ng-click="openModal()">打开模态框</button>

<script type="text/ng-template" id="modal.html"> 
  <div>
    <div class="modal-header">
      <h3 class="modal-title" align="center">
        标题信息
      </h3>
    </div>
    <div class="modal-body">
      <div align="center">
        模态框内容 <br>
        {{data}}
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">
        确认
      </button>
      <button class="btn btn-warning" ng-click="cancel()">
        退出
      </button>
    </div>
  </div>
</script>

<script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>

<script type="text/javascript">
  var app = angular.module('app', ['ui.bootstrap']);
  app.controller('modalController', function($scope, $rootScope, $modal) {
    var data = "通过modal传递的数据";
    $scope.openModal = function() {
        var modalInstance = $modal.open({
          templateUrl : 'modal.html',//script标签中定义的id
          controller : 'modalCtrl',//modal对应的Controller
          resolve : {
            data : function() {//data作为modal的controller传入的参数
               return data;//用于传递数据
            }
          }
        })
      }
  })
   //模态框对应的Controller
   app.controller('modalCtrl', function($scope, $modalInstance, data) {
     $scope.data= data;

     //在这里处理要进行的操作
     $scope.ok = function() {
       $modalInstance.close();
     };
     $scope.cancel = function() {
       $modalInstance.dismiss('cancel');
     }
  });
</script>
</body>
</html>

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

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
JS代码格式化和语法着色V2
Oct 14 Javascript
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
angularJS模态框$modal实例代码
May 27 #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
You might like
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
prototype 学习笔记整理
2009/07/17 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python Tornado框架的使用示例
2020/10/19 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
学生处主任岗位职责
2013/12/01 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
学习心理学的体会
2014/11/07 职场文书
导游欢迎词范文
2015/01/23 职场文书
中班教师个人总结
2015/02/05 职场文书
骨干教师个人总结
2015/02/11 职场文书
征求意见函
2015/06/05 职场文书