Angularjs全局Modal
来源：互联网 发布：access 多少条数据 编辑：程序博客网 时间：2024/06/05 00:21
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller('globalController', ['$scope', 'idDeleteService', function($scope, idDeleteService) {
$scope.transmitId = function(id) {
idDeleteService.id = id;
}
}]);
app.controller('deleteController', ['$scope', 'idDeleteService', function($scope, idDeleteService) {
$scope.modal = idDeleteService;
}]);
app.directive('modal', function() {
return {
resrtrict: 'AE',
scope: {
modalTitle: '@',
modalBody: '@',
confirm:'&',
id: '@'
},
templateUrl: 'tmpl.html',
link: function(scope, elem, attrs) {
}
}
});
app.factory('idDeleteService', function() {
return {
modalTitle: 'Delete',
modalBody: 'Are you sure to delete it?',
id: '',
confirm: function(id) {
console.log('delete : ' + id);
$('#deleteModal').modal('hide');
}
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="globalController">
<div ng-controller="deleteController">
<modal modal-title="{{modal.modalTitle}}" modal-body="{{modal.modalBody}}"
confirm="modal.confirm(id)" id="{{modal.id}}">
</modal>
</div>
<button type="button" data-toggle="modal" class="btn btn-primary" data-target="#deleteModal"
ng-click="transmitId(1)">
Delete modal1
</button>
<button type="button" data-toggle="modal" class="btn btn-primary" data-target="#deleteModal"
ng-click="transmitId(2)">
Delete modal2
</button>
<button type="button" data-toggle="modal" class="btn btn-primary" data-target="#deleteModal"
ng-click="transmitId(3)">
Delete modal3
</button>
</body>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller('globalController', ['$scope', 'idDeleteService', function($scope, idDeleteService) {
$scope.transmitId = function(id) {
idDeleteService.id = id;
}
}]);
app.controller('deleteController', ['$scope', 'idDeleteService', function($scope, idDeleteService) {
$scope.modal = idDeleteService;
}]);
app.directive('modal', function() {
return {
resrtrict: 'AE',
scope: {
modalTitle: '@',
modalBody: '@',
confirm:'&',
id: '@'
},
templateUrl: 'tmpl.html',
link: function(scope, elem, attrs) {
}
}
});
app.factory('idDeleteService', function() {
return {
modalTitle: 'Delete',
modalBody: 'Are you sure to delete it?',
id: '',
confirm: function(id) {
console.log('delete : ' + id);
$('#deleteModal').modal('hide');
}
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="globalController">
<div ng-controller="deleteController">
<modal modal-title="{{modal.modalTitle}}" modal-body="{{modal.modalBody}}"
confirm="modal.confirm(id)" id="{{modal.id}}">
</modal>
</div>
<button type="button" data-toggle="modal" class="btn btn-primary" data-target="#deleteModal"
ng-click="transmitId(1)">
Delete modal1
</button>
<button type="button" data-toggle="modal" class="btn btn-primary" data-target="#deleteModal"
ng-click="transmitId(2)">
Delete modal2
</button>
<button type="button" data-toggle="modal" class="btn btn-primary" data-target="#deleteModal"
ng-click="transmitId(3)">
Delete modal3
</button>
</body>
</html>
<div id="deleteModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
<p>{{modalBody}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="confirm({id:id})">Confirm</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
0 0
- Angularjs全局Modal
- AngularJS - $modal
- 全局 modal 加载页面
- angularjs 弹出框 $modal
- angularJS模态框$modal
- angularjs 弹出框 $modal
- angularjs如何打开modal
- 使用angularjs模态框$modal
- [AngularJS] EasyModal - alert - confirm - modal
- Angularjs全局警告框
- angularjs之全局函数
- AngularJS全局API
- AngularJs 弹出模态窗口 $modal $uibModal
- Angularjs 利用 $modal 实现 confirm 弹窗
- 为Bootstrap Modal（模态框）全局添加拖拽操作
- Modal
- Modal
- modal
- Navicat Premium数据库管理工具
- Unity 常用常找的东西存放
- [LeetCode325] Maximum Size Subarray Sum Equals k
- Java中典型的内存泄露问题和解决方法
- 基于jquery封装的一个调色板，用到了Deferred对象回调
- Angularjs全局Modal
- 个人对container_of宏的理解
- MylSQL索引
- mac os源码编译MYSQL
- CentOS 设置 svn 提交后自动自动更新到 web 目录
- CentOS6.5安装Tab增强版:bash-completion 自动补全
- 华为机试——坐标移动
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
- 2015年十大热门Android开源新项目
