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

Posted 2023-02-23

【中文标题】如何在模态关闭时刷新 ng-repeat？

【英文标题】：How to refresh ng-repeat on modal close?

【发布时间】：2015-04-22 16:13:39

【问题描述】：

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

<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 表？

【问题讨论】：

关闭模式后，您不会修改用于 ng-repeat 的模型，因此它不会改变

这就是$scope.loadQueue(); 应该做的——回调 LeadApprovalCtrl 的 loadQueue 函数实例，以更新模型。

你的 HTML 是什么样的，控制器是相互嵌套的，还是有父控制器？创建服务将是跨控制器通信的最佳方式，但如果您真的反对，嵌套控制器可以允许一些通信。 This video 更详细地介绍。

【参考方案1】：

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

【讨论】：

我可以接受，除了我实际上是在另一个页面上进行跨控制器通信（这只会增加我的困惑，因为它在那里工作而在这里不起作用）。跨度>

你能把它扔进小提琴或plnkr吗？我想看看交叉通信的代码。

正如blindworld所说，如果你嵌套控制器，你可以允许一些通信，如这个plnkr plnkr.co/edit/LH81qIl6wpmjdxVHDOUE?p=preview