时间戳

首页 > 解决方案 > 如何将结果从 $uibModal 返回到父控制器

javascript - 如何将结果从 $uibModal 返回到父控制器

问题描述

从 $uibModal 回调后范围未定义

我有一个具有控制器的指令（Angularjs），从那里我调用了一个 uibModal，我想在其中修改我单击的对象的一些细节。使用模态我发送两个参数和一个回调，一切似乎都很好，但是当角度返回回调函数时，控制器（不是模态控制器）的范围是未定义的，实际上一切都是未定义的，我该如何沟通这些两个控制器，因此当用户在模态中更新某些内容时，我可以在另一个控制器中更新它。

模态控制器

(function () {
    "use strict";

    angular
        .module("app.users")
        .controller("editVitalCtrl", editVitalCtrl);

    editVitalCtrl.$inject = ["items"];
    function editVitalCtrl(items) {

        var vm = this;
        vm.modalTitle = "Edit " + items.vital.title;
        vm.vital = items.vital;

        vm.clickCancelModal = function () {
            vm.$close();
        }

        vm.clickSaveModal = function () {
            $scope.$result(items.saveCallback($scope.vital));
        }

    }
})();

DirectiveThatOpenTheModal.directive.js

(function () {
    "use strict";

    angular
        .module("app.users")
        .directive("directiveThatOpenTheModal", [
            function () {
                return {
                    restrict: "E",
                    scope: {
                        columnConfig: "=columnConfig",
                        partnerId: "=partnerId"
                    },
                    link: {
                        pre: function (scope) {

                        }
                    },
                    controller: ["$http", "$scope", "$uibModal",
                        function ($http, $scope, $uibModal) {
                            $scope.vitalList = [];


                            if ($scope.partnerId) {

                                var params = {
                                    bankId: Number.isInteger($scope.partnerId) ? $scope.partnerId : -1
                                };

                                getColumnConfiguration(params, $http).success(function (data) {
                                    $scope.vitalList = data.columns;
                                });
                            }

                            $scope.removeVital = function (vital) {
                                removeVital(vital);
                            }

                            function callback(vital) {
                                // Code here in callback, after code get in here everythings is undefined
                            }

                            $scope.editVital = function (vital) {

                                $scope.modal = $uibModal.open({
                                    animation: true,
                                    windowClass: 'modal-add-cont modal-alerts',
                                    templateUrl: '/controller/view',
                                    controller: 'modalCtrl',
                                    resolve: {
                                        items: function () {
                                            return {
                                                vital: vital,
                                                saveCallback: callback,
                                                partnerId: $scope.partnerId,
                                                scope: $scope
                                            }
                                        }
                                    },
                                    size: 'lg'
                                });
                            }


                            function removeVital(vital) {
                                var index = $scope.vitalList.indexOf(vital);
                                $scope.vitalList.splice(index, 1);
                            }
                        }],
                    templateUrl: '/route/Configuration'
                };
            }]);
    function getColumnConfiguration(params, $http) {
        var url = "/someroute/somemethod";
        return $http.get(url, { params: params });
    }
})();

标签： javascriptangularjsangularjs-directivebootstrap-modalangular-ui-bootstrap

解决方案

你能给我一个替代方案吗？

使用模态的回调是不明智的。推荐的做法是解决模式返回的承诺。

模态控制器

app.controller("modalCtrl", function(items) {

    var vm = this;
    vm.modalTitle = "Edit " + items.vital.title;
    vm.vital = items.vital;

    vm.clickCancelModal = function () {
        vm.$dismiss('cancel');
    }

    vm.clickSaveModal = function () {
        vm.$close(vm.vital));
    }

})

打开模态

$scope.editVital = function (vital) {

    $scope.modal = $uibModal.open({
        animation: true,
        windowClass: 'modal-add-cont modal-alerts',
        templateUrl: '/controller/view',
        controller: 'modalCtrl',
        resolve: {
            items: function () {
                return {
                    vital: vital,
                    ̶s̶a̶v̶e̶C̶a̶l̶l̶b̶a̶c̶k̶:̶ ̶c̶a̶l̶l̶b̶a̶c̶k̶,̶
                    partnerId: $scope.partnerId,
                    scope: $scope
                }
            }
        },
        size: 'lg'
    });

    var promise = $scope.modal.result;

    promise.then(function(result) {
        console.log("Save", result);
    }).catch(function(reason) {
        console.log("Cancel", reason);
    });
}

有关详细信息，请参阅AngularUI Bootstrap ui.bootstrap.modal API 参考

模态对话框可以使错误率加倍，增加完成任务的时间，并且几乎被用户普遍鄙视。其他通知方式通常是可用的，应在可能和适当的情况下使用。

有关更多信息，请参阅有哪些研究表明模态对话框具有破坏性？

推荐阅读