javascript - 如何将结果从 $uibModal 返回到父 Controller

Question

从 $uibModal 回调后范围未定义

我有一个带有 Controller 的指令(Angularjs)，从那里我调用一个uibModal，我想在其中修改我单击的对象的一些详细信息。 使用模态，我发送两个参数和一个回调，一切似乎都正常，但是当 Angular 返回回调函数时， Controller (不是模态 Controller )的范围未定义，实际上一切都是未定义的，我如何沟通这些两个 Controller ，因此当用户更新模式中的某些内容时，我可以在另一个 Controller 中更新它。

modal.controller

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

Answer 1

can you please give me an alternative or something?

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

模态 Controller

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 Reference

---

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

有关详细信息，请参阅What research is there suggesting modal dialogs are disruptive?