AngularJs 弹出模态框（model）_AngularJS-js教程-PHP中文网

首页

web前端

js教程

AngularJs 弹出模态框（model）_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:06 PM

推荐阅读：详解AngularJS 模态对话框

$modal是一个可以迅速创建模态窗口的服务，创建部分页，控制器，并关联他们。

$modal仅有一个方法open(options)

templateUrl：模态窗口的地址

template：用于显示html标签

scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScope

controller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入

resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()

backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭

keyboard：当按下Esc时，模态对话框是否关闭，默认为ture

windowClass：指定一个class并被添加到模态窗口中

open方法返回一个模态实例，该实例有如下属性

close(result)：关闭模态窗口并传递一个结果

dismiss(reason)：撤销模态方法并传递一个原因

result：一个契约，当模态窗口被关闭或撤销时传递

opened：一个契约，当模态窗口打开并且加载完内容时传递的变量

另外，$modalInstance扩展了两个方法$close(result)、$dismiss(reason)，这些方法很容易关闭窗口并且不需要额外的控制器

HTML

<!DOCTYPE html> 
<html ng-app="ModalDemo"> 
<head> 
<title></title> 
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="lib/angular/angular.min.js"></script> 
<script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-...min.js"></script> 
<script src="lib/angular/in/angular-locale_zh-cn.js"></script> 
</head> 
<body> 
<div ng-controller="ModalDemoCtrl"> 
<script type="text/ng-template" id="myModalContent.html"> 
<div class="modal-header"> 
<h>I'm a modal!</h> 
</div> 
<div class="modal-body"> 
<ul> 
<li ng-repeat="item in items"> 
<a ng-click="selected.item = item">{{ item }}</a> 
</li> 
</ul> 
Selected: <b>{{ selected.item }}</b> 
</div> 
<div class="modal-footer"> 
<button class="btn btn-primary" ng-click="ok()">OK</button> 
<button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 
</script> 
<button class="btn" ng-click="open()">Open me!</button> 
</div> 
<script> 
var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal, $log) { 
$scope.items = ['item', 'item', 'item']; 
$scope.open = function () { 
var modalInstance = $modal.open({ 
templateUrl: 'myModalContent.html', 
controller: ModalInstanceCtrl, 
resolve: { 
items: function () { 
return $scope.items; 
} 
} 
}); 
modalInstance.opened.then(function(){//模态窗口打开之后执行的函数 
console.log('modal is opened'); 
}); 
modalInstance.result.then(function (result) { 
console.log(result); 
}, function (reason) { 
console.log(reason);//点击空白区域，总会输出backdrop click，点击取消，则会暑促cancel 
$log.info('Modal dismissed at: ' + new Date()); 
}); 
}; 
}; 
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
$scope.items = items; 
$scope.selected = { 
item: $scope.items[] 
}; 
$scope.ok = function () { 
$modalInstance.close($scope.selected); 
}; 
$scope.cancel = function () { 
$modalInstance.dismiss('cancel'); 
}; 
}; 
</script> 
</body> 
</html>

登录后复制

以上所述是小编给大家介绍的AngularJs 弹出模态框（model）的相关内容，希望对大家有所帮助！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7612

CakePHP 教程

1387

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

136

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。