您的位置：首页 > Web前端 > AngularJS

AngularJS 模态对话框

2016-04-07 10:25 513 查看

本文内容

项目结构
运行结果
index.html
mymodal.js
参考资料

本文讲解 Angular JS 实现模式对话框。基于 AngularJS v1.5.3、Bootstrap v3.3.6 和 ui-bootstrap-tpls 0.11。ui-bootstrap-tpls 是 AngularJS 利用 bootstrap 封装的控件——AngularJS-ui-bootstrap，网上控件大都利用它，github 上有源代码。

最近研究 ELK，需要用 AngularJS 写个 UI 出来，因为 Kibana 3 是用 AngularJS 写的，我也选择了 AngularJS。

当时想，点击页面按钮弹出个 DIV 出来，DIV 上有一些检索条件，可是实现这个弹出 DIV 功能后，发现不会在 DIV 里初始化时间控件，靠~

为了讲解方便，源代码都加了行号，所以，如果你想自己运行，可以直接去 github 上下载 demo。

下载 Demo

项目结构

图 1 项目结构

运行结果

图 2 运行结果：大模态

index.html

<!DOCTYPE html>


[code]<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!-->

<html class="no-js">

<!--<![endif]-->

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width">

<title>AngularJS 模态对话框</title>

<link rel="stylesheet"

href="../src/vendor/bootstrap/dist/css/bootstrap.css">

</head>

<body ng-app="myApp" class="body">

<!-- modal template -->

<script type="text/ng-template" id="myModelContent.html">

<div class="modal-header">

<h3 class="modal-title">模态框</h3>

</div>

<div class="modal-body">

<ul>

<li ng-repeat="item in items">

<a ng-click="selected.item = item">{{item}}</a>

</li>

<div class="h2">当前选择： <b>{{selected.item}}</b></div>

</ul>

</div>

<div class="modal-footer">

<button class="btn btn-primary" ng-click="ok()">

确认

</button>

<button class="btn btn-warning" ng-click="cancel()">退出</button>

</div>

</script>

<div class="container h1">AngularJS 模态对话框</div>

<section class="row">

<section ng-controller="modalDemo" class="col-md-6"

style="margin: 40px auto; float: none; background: #fff; padding: 30px;">

<button class="btn btn-default" ng-click="open('lg')">大模态</button>

<button class="btn btn-default" ng-click="open()">中模态</button>

<button class="btn btn-default" ng-click="open('sm')">小模态</button>

<hr>

<div class="h1" ng-show="selected">当前选择：{{selected}}</div>

</section>

</section>

<!-- load js -->

<script src="../src/vendor/angular/angular.js"></script>

<script

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

<script src="../src/js/mymodal.js"></script>

</body>

</html>

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

说明：

第2~7行，是关于 HTML 5（以下简称 H5）浏览器兼容的；

第9行，是设置页面编码，如果没有，用 firefox 调试时，你看到编码问题的提醒；

第10、11行，分别是关于 H5 在 Chrome、移动设备的设置；

第13行，是引入 bootstrap.css；

第16行，指定了 AngularJS 的 ng-app 属性“myApp”；

第18~36行，是定义模态对话框的 H5 模板。注意，它在 scrpit 编辑里，并且还起了名字“myModelContent.html”；

第38~48行，是页面的三个按钮，分别显示大、中、小三个尺寸的模态对话框；

第40行，指定了 AngularJS 控制器 ng-controller 属性为“modalDemo”，表明这里面有“动作”；

第42~44行，指定了 ng-click 属性，表明了元素上有点击事件。open 方法定义在后面的 mymodal.js 文件中；

第50~52行，加载 AngularJS 和 ui-bootstrap-tpls 脚本文件；

第53行，加载你自己的 mymodal.js 模态对话框的脚本文件。

mymodal.js

/**


[code] *

*/

angular.module('myApp', [ 'ui.bootstrap' ])

// demo controller

.controller('modalDemo', function($scope, $modal, $log) {

// list

$scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ];

// open click

$scope.open = function(size) {

var modalInstance = $modal.open({

templateUrl : 'myModelContent.html',

controller : 'ModalInstanceCtrl', // specify controller for modal

size : size,

resolve : {

items : function() {

return $scope.items;

});

// modal return result

modalInstance.result.then(function(selectedItem) {

$scope.selected = selectedItem;

}, function() {

$log.info('Modal dismissed at: ' + new Date())

});

})

// modal controller

.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {

$scope.items = items;

$scope.selected = {

item : $scope.items[0]

};

// ok click

$scope.ok = function() {

$modalInstance.close($scope.selected.item);

};

// cancel click

$scope.cancel = function() {

$modalInstance.dismiss('cancel');

});

说明：

第4行，在 AngularJS 里定义你的 myApp 模块，并且该模块依赖 ui.bootstrap。ui.bootstrap 在 ui-bootstrap-tpls.js 脚本里；

第6行，定义模态对话框的控制器，参数 $scope、$modal、$log 都是 AngularJS 提供，分别是作用域、模态、日志，希望在 function 里使用；

第10~25行，定义打开模态对话框的 open 方法，这就是页面里 ng-click 调用的方法。并且，第13行，指定了模态对话框对应的控制器，接下来会定义；

第30行，是定义模态对话框的控制器，定了模态对话框中“确定”和“取消”两个事件的方法；

另外，AngularJS 中不用考虑对象创建问题，AngularJS 会自动进行注入依赖。

参考资料

[align=left]AngularJS $log[/align]

[align=left]AngularJS $modal[/align]

[align=left]AngularJS API[/align]

下载 Demo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航