按钮单击并刷新表angularjs关闭模式对话框

Question

我正在使用模态对话框来添加和更新记录。我想点击add或update按钮然后刷新我的表格后关闭模态对话框。

以下是我的观看代码：

<form name="clientForm" ng-submit="check(cid)" ng-controller="ClientsController">

    <div class="form-group">
        <label for="name">Name</label>            
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
        </div>
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
        </div>
    </div>

    <div class="form-group">
        <label for="phone">Phone</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
        </div>
    </div>

    <div class="well well-lg text-center bg-gray">          
        <button class="btn btn-success" ng-if="cid">Save Client</button>                        
        <button class="btn btn-danger" ng-if="cid" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>                        
        <button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>            
        <button class="btn btn-success" ng-if="!cid">Add Client</button>            
    </div>
</form>

控制器：

angular.module（ 'DemoApp'）         .controller（'ClientsController'，函数（$ http，$ scope，flashService）{

        $scope.showModal = false;
        $scope.provider = null;

        var refresh = function () {
            $http.get('/clients').success(function (response) {                    
                $scope.rowClients = response; // This will put data into our html file
            });
        };

        refresh();

        $scope.addClient = function () {
            $http.post('/clients', {param: $scope.client}).success(function (response) {
                if (response) {
                    flashService.Success('Client added successfully');
                    $scope.client = "";
                    //angular.element('.modal').modal('hide');
                    $scope.closemodal();
                    refresh();
                }
            });
        };

        $scope.showModel = function () {
            $scope.showModal = !$scope.showModal;
        };

        $scope.closemodal = function () {
            $scope.showModal = false;
        };

        $scope.updateClient = function (id) {
            $http({
                url: '/clients/' + id,
                method: "PUT",
                data: {
                    clientsData: $scope.client
                }
            }).success(function (response) {
                if (response) {
                    flashService.Success('Client updated successfully');
                    $scope.closemodal();
                    refresh();
                }
            });
        };

        $scope.toggleModal = function (id) {
            $http.get('/clients/' + id).success(function (response) {
                $scope.cid = id;
                $scope.client = response;
                $scope.showModal = !$scope.showModal;
            });
        };

        $scope.check = function (id) {
            if (id)
                $scope.updateClient(id);
            else
                $scope.addClient();
        };

    });

这是我的模态指令：

DemoApp.directive('modal', function () {
    return {
        template: '<div class="modal fade">' +
                '<div class="modal-dialog">' +
                '<div class="modal-content">' +
                '<div class="modal-header bg-primary">' +
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                '<h4 class="modal-title">{{ title }}</h4>' +
                '</div>' +
                '<div class="modal-body" ng-transclude></div>' +
                '</div>' +
                '</div>' +
                '</div>',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: true,
        link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;

            scope.$watch(attrs.visible, function (value) {
                if (value == true)
                    $(element).modal('show');
                else
                    $(element).modal('hide');
            });

            $(element).on('shown.bs.modal', function () {
                scope.$apply(function () {
                    scope.$parent[attrs.visible] = true;
                });
            });

            $(element).on('hidden.bs.modal', function () {
                scope.$apply(function () {
                    scope.$parent[attrs.visible] = false;
                });
            });
        }
    };
});

布局：加载脚本

    <script src="js/vendor/angular/angular.js"></script>
    <script src="js/vendor/angular/angular-route.js"></script>        
    <script src="js/app.js"></script>
    <script src="js/controllers/ClientsController.js"></script>
    <script src="js/directives/modal.js"></script>
    <script src="js/directives/pageSelect.directive.js"></script>
    <script src="js/directives/confirm.js"></script>
    <script src="js/services/flashService.js"></script>
    <script src="vendor/ie10-viewport-bug-workaround.js"></script>        
    <script src="js/module/smart-table.debug.js"></script>
    <script src="js/vendor/angular-smart-table/dist/smart-table.min.js"></script>        

正如您所看到的那样，我正在调用$scope.closemodal();来关闭模式对话框并refresh()在从服务器获得响应后刷新表，但它无效。

任何帮助都会受到赞赏。