Question

从$ uibModal 回调后，

范围未定义

我有一个指令（Angularjs），它有一个控制器，从那里我调用一个uibModal，我想修改我点击的对象的一些细节。使用模态我发送两个参数和一个回调，一切似乎都没问题但是当回到回调函数时，控制器（不是模态控制器）的范围是未定义的，实际上一切都是未定义的，我该如何通信两个控制器，所以当用户更新模态中的内容时，我可以在另一个控制器中更新它。

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

你可以给我一个替代品吗？

使用模态回调是不明智的。建议的做法是解决模态返回的承诺。

模态控制器

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?

如何将$ uibModal的结果返回到父控制器

1 个答案:

模态控制器

打开模态