angular中 modal模态框(可复用)
2016-04-07 22:40
501 查看
可复用的 (普通的在function中找) : 点击事件之后的函数
html:
ngjs:
模态框html
$rootScope.confirm = function(content, okFn, cancelFn) { var modal = $modal({ html: true, show: false, templateUrl: 'views/template/ptteng-confirm-0.0.1.html', controller: function($scope) { $scope.content = content; $scope.ok = function() { typeof okFn == 'function' && okFn(); modal.$promise.then(modal.hide); }; $scope.cancel = function($scope) { typeof cancelFn == 'function' && cancelFn(); modal.$promise.then(modal.hide); }; } }); modal.$promise.then(modal.show); };
html:
<td> <button class="btn btn-default btn-xs" ui-sref="field.moduleDetail({id: li.id})">编辑</button> <button class="btn btn-danger btn-xs" ng-click="vm.delete(li.id)">删除</button> </td>
ngjs:
vm.delete = function(id) { $rootScope.confirm("您确定要删除吗?", function() { moduleService.deleteModule(id).then(function(res) { $state.go($state.current, {}, {reload: true}); }); }); };
模态框html
<div class="modal ng-scope top am-fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">提示</h3> </div> <div class="modal-body"> {{content}} </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="ok()">确定</button> <button class="btn btn-warning" type="button" ng-click="cancel()">取消</button> </div> </div> </div> </div>
相关文章推荐
- Angularjs Controller 间通信机制
- angularjs How to set focus on input field?
- AngularJS中ng-options简单用法及预选项失败的原因
- angularjs注意点
- 通过路由管理视图间切换 - AngularJS路由解析
- AngularJs 过滤器
- AngularJs 简单数据绑定
- AngularJs 使用 $timeout
- Angularjs基础教程
- AngularJs 弹出模态框(model)
- 详解AngularJS 模态对话框
- 理解angular中的module和injector,即依赖注入
- AngularJS 模态对话框
- AngularJS 1.x学习<2>
- [置顶] 跟我学AngularJs:AngularJs入门及第一个实例
- [Angular 2] *ngFor with index
- AngularJS 1.x学习<1>
- 详解AngularJS 模态对话框
- AngularJs 弹出模态框(model)
- angularjs 前端页面之用户修改密码