Question

所以我有一个带有一些数据的主控制器（由$http.get提取），当你点击一个项目时，会弹出一个包含更多细节的模态。

在我的模态中，有一个按钮来修改数据（由$http.post发送），然后关闭模态并需要告诉父控制器刷新数据，因为它已被事件修改模态。

Answer 1

<强> HTML

<!--MODAL WINDOW for item details -->
            <script type="text/ng-template" id="itemModalContent.html">
                <div class="modal-dialog ng-hide="hidden">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-close"></i></button>
                            <span class="item-name">{{item.name}}</span>
                        </div>
                        <div class="modal-body">
                            <p class="description">{{item.description}}</p>
                            <input type="hidden" ng-model="item.uniqueid" id="uniqueid" value="{{item.uniqueid}}" name="uniqueid"/>
                            <p class="response"> {{PostDataResponse}}</p>
                            <p class="error"> {{ResponseDetails}}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
                            <button type="button" class="button ok btn-primary" ng-click="confirm()">Submit</button> 
                        </div>
                    </div>
                </div>
            </script>

<强>角

 /* main controller - items */
        myApp.controller('itemsCtrl', function ($scope, $rootScope, $http, $uibModal) {
           //wrap $http.get request in a function
            $scope.loadMyData = function () {
                url = '<your_server>';

                $http.get(url).then(function (response) {
                    $scope.items = response.data;
                    $scope.showModal = false;
                    $scope.open = function (item) {
                        $('.overlay').show();
                        var modalInstance = $uibModal.open({
                            controller: "itemsModalInstanceCtrl",
                            templateUrl: 'itemModalContent.html',
                            resolve: {
                                item: function () {
                                    return item;
                                }
                            }
                        });
                    };
                });
            }
            //initial load
            $scope.loadMyData();

            //event listener for refresh_items event
            $rootScope.$on('refresh_items', function (event, data) {
                console.log(data);
                $scope.loadMyData();
            });
        });

/* modal instance - item */
myApp.controller('itemsModalInstanceCtrl', function ($http, $scope, $timeout, $uibModalInstance, item) {
    $scope.item = item;

    $scope.cancel = function () {
        $uibModalInstance.dismiss();
        $('.overlay').hide();
    };

    updateUrl = '<your_webservice_url>';

    $scope.confirm = function () {
        var myitemid = $scope.item.uniqueid;

        // use $.param jQuery function to serialize data from JSON
        var data = $.param({
            uniqueid: myitemid
        });
        var config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }

        $http.post(updateUrl, data, config)
           .success(function (data, status, headers, config) {

               $scope.PostDataResponse = "You have successfully submitted your data";
           })
           .error(function (data, status, header, config) {
               $('.response').addClass('error');
               $scope.ResponseDetails = "data: " + data +
                       "<br />status: " + status +
                       "<br />headers: " + header +
                       "<br />config: " + config;
           });
        $timeout(function () {
            $uibModalInstance.close({});
            $('.overlay').hide();
            //tell parent controller to refresh the data
            $scope.$emit('refresh_items', data);
        }, 3000);
    }

});

Angular：从模态提交帖子请求并刷新主页面

1 个答案: