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

angular中 modal模态框(可复用)

2016-04-07 22:40 501 查看
可复用的 (普通的在function中找) : 点击事件之后的函数

$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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: