如何在模态关闭时刷新 ng-repeat？

Question

设置： 我有一个页面（角度），里面有一个转发器。

<tr ng-repeat="row in results.leads">
    <td>{{row.SubmittedByName}}</td>

在转发器中，有一列带有一个按钮，可以打开一个模态来更改该行的数据。模态，反过来，有一个用于保存记录的按钮，关闭当前模态，打开一个新模态，让用户输入评论，保存，然后关闭模态。

这一切都很好。太棒了。

不起作用的是...当模式关闭时，ng-repeat 应该刷新，因为在模式中采取的操作实际上会从数据中删除行。如果我手动刷新页面，该行就会消失 - 但不刷新页面，什么也不会发生。

角度控制器： '使用严格';

angular.module('leadApproval.controllers', []).

    //This is the main page core method - The data is loaded here, and the in-table-row buttons work from here.
    controller('LeadApprovalCtrl', function ($scope, $location, $modal, api, notificationService) {
        $scope.currentPage = 1;
        $scope.pageSize = 13;
        $scope.loaded = false;
        $scope.totalItems = 0;
        $scope.head = {};
        $scope.sort = {};
        $scope.selectedCls = null;
        $scope.changeSorting = null;
        $scope.setPage = null;
        $scope.results = null;

        $scope.loadQueue = (function () {
            api.queue.load(function (data) {
                if (data.error) {
                    notificationService.error('<h4>An error occurred..</h4>' + data.error);
                } else {
                    $scope.results = data;
                    $scope.loaded = true;
                }
            });
        });

        $scope.acceptLead = function (leadId) {

            var modal = $modal.open({
                templateUrl: '/Content/LeadApproval/Approved.html',
                controller: 'ApprovedCtrl',
                windowClass: '',
                resolve: { leadId: function () { return leadId; } }
            });

            modal.result.then(function (result) {
                if (result === 'save') {
                    $scope.loadQueue();
                    notificationService.success('Lead successfully approved.');
                }
            });
        }

        $scope.searchLead = function (id) {
            $location.path('search/' + id);
        }

        $scope.rejectLead = function (leadId) {
            var modal = $modal.open({
                templateUrl: '/Content/LeadApproval/NotApproved.html',
                controller: 'NotApprovedCtrl',
                windowClass: '',
                resolve: { leadId: function () { return leadId; } }
            });

            modal.result.then(function (result) {
                if (result === 'save') {
                    $scope.loadQueue();
                    notificationService.success('Lead successfully removed from queue.');
                }
            });
        };

        $scope.editLead = function (id) {
            window.location = "/Customers/Edit/" + id;
        }

        // Open Lead Detail
        var leadHistoryOverviewScope = {
            item: {}
        };

        $scope.showLeadDetail = function (customerId, leadId) {
            leadHistoryOverviewScope.item = { customerId: customerId, leadOppId: leadId };
            var modal = $modal.open({
                templateUrl: '/content/leadApproval/leaddetail.html',
                controller: 'LeadHistoryCtrl',
                windowClass: 'wide-modal-window',
                resolve: { childScope: function () { return leadHistoryOverviewScope; } }
            });
        };

        $scope.loadQueue();
    }).


// Lead History controller
    controller('LeadHistoryCtrl', function ($scope, $modal, $modalInstance, api, notificationService, childScope) {
        $rootScope.loaded = false;
        $scope.customerLoaded = false;
        var historyStartDate = new moment().subtract(6, 'months').format("YYYY-MM-DD");
        var historyEndDate = new moment().format("YYYY-MM-DD");
        $scope.orders = [];
        $scope.history = [];

        $scope.showActionButtons = true;

        api.queue.queryOrders(childScope.item.customerId, historyStartDate, historyEndDate, function (result) {
            $scope.orders = result || [];
            $scope.ordersLoaded = true;
        });

        api.queue.details.get({ id: childScope.item.customerId, leadOppId: childScope.item.leadOppId }, function (result) {
            $scope.history = result;
            $scope.customerLoaded = true;
        });

        $scope.acceptLead = function (leadId) {
            $modalInstance.close();

            var modal = $modal.open({
                templateUrl: '/Content/LeadApproval/Approved.html',
                controller: 'ApprovedCtrl',
                windowClass: '',
                resolve: { leadId: function () { return leadId; } }
            });

            modal.result.then(function (result) {
                if (result === 'save') {
                    $scope.loadQueue();
                    notificationService.success('Lead successfully approved.');
                }
            });
        }

        $scope.rejectLead = function (leadId) {
            $modalInstance.close();

            var modal = $modal.open({
                templateUrl: '/Content/LeadApproval/NotApproved.html',
                controller: 'NotApprovedCtrl',
                windowClass: '',
                resolve: { leadId: function () { return leadId; } }
            });

            modal.result.then(function (result) {
                if (result === 'save') {
                    $scope.loadQueue();
                    notificationService.success('Lead successfully removed from queue.');
                }
            });
        };

        $scope.editLead = function (id) {
            $modalInstance.close();
            window.location = "/Customers/Edit/" + id;
        }

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    })
;

我注意到$scope.loadQueue();（大约 17 行）作为未定义对象抛出错误。由于某种原因，“LeadHistoryCtrl”在“LeadApprovalCtrl”中看不到范围，因此无法刷新 ng-repeat。我什至尝试将 loadQueue 函数复制到 LeadHistoryCtrl 中，但没有真正的效果 - 代码然后运行......但主页没有刷新。

那么，问题来了： 如何让 LoadHistoryCtrl 中的 loadQueue() 调用来调用 LeadApprovalCtrl 中的方法，并刷新主页 ng-repeat 表？

Answer 1

如果您需要从多个控制器访问该功能，通常您会希望将该功能移至服务中。在 Angular 中，您不能从控制器直接与另一个控制器通信。您可以使用 $scope.broadcast / $scope.emit 来触发它。 What's the correct way to communicate between controllers in AngularJS?