从角带模式返回数据

I am sorry if this has been already asked, but is it possible to return data from angular strap modal, and if so, could anyone provide short code snippet how to do so?

很抱歉，如果这个问题已经被问过了，但是是否可以从角带模式返回数据，如果可以，是否可以提供简短的代码片段?

There is very nice option to return data from angular-ui modal, but I was not able to find the strap-way. Thank you very much for answers.

从angular-ui模式返回数据是一个很好的选项，但是我找不到strap-way。非常感谢你的回答。

2 个解决方案

#1

I've come up with a simple way to achieve this and the API is just like angular-ui modal.

我想到了一个简单的方法来实现它，API就像angular-ui模式。

You decorate the $modal service:

您装饰$modal service:

.config(['$provide', function($provide) {

    $provide.decorator('$modal', ['$q', '$rootScope', '$delegate', function ($q, $rootScope, $delegate)
    {
        return function returnAResultWhenClosingTheModal(options)
        {
            var deferred = $q.defer();

            if (!options.scope) {
                options.scope = $rootScope.$new();
            }

            options.scope.$close = function(result)
            {
                deferred.resolve(result);
                this.$hide();
            };

            // Call the real $modal service to create the modal
            var modal = $delegate(options);

            modal.result = deferred.promise;

            return modal;
        }
    }
    ]);
}])

To create a modal is the same as always except now each modal has a result property which is a promise that gets resolved when the modal is closed:

创建一个模态总是一样的，除了现在每个模态都有一个结果属性这是一个承诺在模态关闭时得到解决:

var myModal = $modal(modalOptions);

myModal.result.then(function(result)
{
    // I now have access to the result the modal closed with.
});

In the modal controller you simply call the new $close method on the $scope with the result you want to return:

在模态控制器中，您只需调用$作用域上的新的$close方法，并返回您想要返回的结果:

// In the controller
$scope.$close(resultToReturn);

#2

You can return any data from your angular-strap modal very easy.

Suppose you have some object, that should be updated after modal's submit. For example, you have a controller, that popups your modal. All you have to do is to define some handler, that should update your data, pass this handler to youp modal via resolve option and call this handler in modal's controller.

Example:
This controller contains user details and shows modal for change this data.

您可以返回任何数据从您的角度皮带模态非常容易。假设您有一些对象，应该在模态提交之后进行更新。例如，你有一个控制器，它会弹出你的模态。你所要做的就是定义一些处理程序，这些处理程序应该更新你的数据，通过resolve选项将这个处理程序传递给youp modal，并在modal的控制器中调用这个处理程序。示例:此控制器包含用户详细信息，并显示更改此数据的模式。

app.controller('userDetailsCtrl', ['$scope', '$modal', function($scope, $modal) {
    $scope.userDetails = {
        firstName: 'John',
        lastName: 'Smith'
    };

    $scope.showChangeUserDetailsModal = function() {
        var options = {
            userDetails: angular.copy($scope.userDetails),
            submit: function(result) {
                $scope.userDetails = angular.copy(result);
            }
        };
        $modal({
            controller: 'changeUserDetailsCtrl',
            contentTemplate: '', //Here is your template with some input fields
            show: true,
            resolve: {
                options: function() {
                    return options;
                }
            }
        });
    };
}]);

Modal's controller calls handler submit, passing result of modal's work.

模态的控制器调用处理程序提交，通过模态的工作结果。

app.controller('changeUserDetailsCtrl', ['$scope', 'options', function($scope, options) {
    $scope.userDetailsDraft = options.userDetails;

    $scope.submitChanges = function() {
        options.submit($scope.userDetailsDraft);
        $scope.$hide(); //Close modal after submit
    };
}]);

#1