Return 数据来自 angular 表带模态

Question

很抱歉，如果已经有人问过这个问题，但是是否可以从 angular strap modal return 数据，如果可以，谁能提供简短的代码片段如何做到这一点？

从 angular-ui 模态到 return 数据有很好的选择，但我找不到带路。非常感谢您的回答。

Answer 1

您可以非常轻松地return 来自您的 angular-strap 模态的任何数据。

假设你有一些对象，应该在模态提交后更新。例如，您有一个控制器，它会弹出您的模式。您所要做的就是定义一些处理程序，它应该更新您的数据，通过 resolve 选项将此处理程序传递给您的模态，并在模态的控制器中调用此处理程序。

例子：
此控制器包含用户详细信息并显示更改此数据的模式。

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 的控制器调用处理程序 submit，传递 modal 的工作结果。

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
    };
}]);

Answer 2

我想出了一个简单的方法来实现这一点，API 就像 angular-ui 模态一样。

您装饰 $modal 服务：

.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;
        }
    }
    ]);
}])

创建模态与往常一样，只是现在每个模态都有一个 result 属性这是一个在模态关闭时得到解决的承诺：

var myModal = $modal(modalOptions);

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

在模态控制器中，您只需在 $scope 上调用新的 $close 方法，并得到您想要的结果 return:

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

Return 数据来自 angular 表带模态

Return data from angular strap modal

angularjs

angular-ui

angular-strap