1. 程式人生 > >angular中 modal模態框(可複用)

angular中 modal模態框(可複用)

可複用的 (普通的在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>