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

Question

设置:我有一个页面(有 Angular )，里面有一个中继器。

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

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

这一切都很好。太棒了。

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

Angular Controller : '使用严格';

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 行所示)会抛出一个 undefined object 的错误。由于某种原因，“LeadHistoryCtrl”无法看到“LeadApprovalCtrl”中的范围，因此无法刷新 ng-repeat。我什至尝试过将 loadQueue 函数复制到 LeadHistoryCtrl 中，但没有实际效果 - 代码然后起作用......但主页不刷新。

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

Answer 1

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