如何将从modal获取的数据发送到主视图?

时间:2015-03-25 08:59:47

标签: angularjs angular-ui modalviewcontroller

app.controller('FilterController', ['$scope', '$http',
function($scope,$http) {

    //Loading the data to the filter scope
    $http.get('/main').success(function(response){
        $scope.data = response;
    });

    //The object that the input fields in the modal bind to
    $scope.selected = {};

    this.applyFilter = function(){
        $http.post('/main/query', $scope.selected).success(function(response){
            //The response is the filtered object sent by the server
            console.log(response); //This is the response I want to bind to the main view

            //Do something to pass the response to the main scope

        });
    };
}]);

模态包含一些用户选择参数的下拉菜单,这些参数将保存到“选定的”选项中。变量,它又被发送到数据库以查询新的数据集。 现在的挑战是将这些新数据发送到主范围并刷新页面。我做了一些研究,发现似乎可以通过解决方案完成,但我不确定如何将代码放在一起。请帮忙..

2 个答案:

答案 0 :(得分:0)

您应该只需将$ scope.data分配给响应即可。

    this.applyFilter = function(){
        $http.post('/main/query', $scope.selected).success(function(response){
            //The response is the filtered object sent by the server
            console.log(response); //This is the response I want to bind to the main view

            // Binding the response
            $scope.data = response;

            //Do something to pass the response to the main scope

        });
    };

答案 1 :(得分:0)

由于您使用angular-ui标记了问题,我假设您正在使用ui.bootstrap作为模态。

首先向您的应用注入ui.bootstrap

在主控制器中打开模态:

app.controller('MainController', ['$scope', '$modal',
function($scope,$modal) {
    $scope.filterModal = $modal.open({
        templateUrl: 'modal.html',
        controller: 'FilterController',
        size: 'md'
    });
    $scope.filterModal.result.then(function (result) {
        // do what you have to with result from modal
    });
}]);

你的模态必须有一个控制器:

app.controller('FilterController', ['$scope', '$http','$modalInstance',
function($scope,$http, $modalInstance) {

    //Loading the data to the filter scope
    $http.get('/main').success(function(response){
        $scope.data = response;
    });

    //The object that the input fields in the modal bind to
    $scope.selected = {};

    this.applyFilter = function(){
        $http.post('/main/query', $scope.selected).success(function(response){
            //The response is the filtered object sent by the server
            console.log(response); //This is the response I want to bind to the main view

            //Do something to pass the response to the main scope
            $modalInstance.close(response);
        });
    };
}]);