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

时间:2015-04-22 16:13:40

标签: javascript jquery angularjs

设置: 我有一个页面(有角度),里面有一个转发器。

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

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

这一切都很棒。奇妙。

DOESN&T; T工作是什么......当模态关闭时,ng-repeat应该刷新,因为模态中采取的动作实际上将从数据中删除行。如果我手动刷新页面,该行就会消失 - 但如果没有刷新页面,则不会发生任何事情。

角度控制器:     &#39;使用严格的&#39;;

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行)会将错误作为未定义的对象抛出。出于某种原因&#34; LeadHistoryCtrl&#34;无法在&#34; LeadApprovalCtrl&#34;中查看范围,因此无法刷新ng-repeat。我甚至尝试将loadQueue函数复制到LeadHistoryCtrl中,但没有实际效果 - 代码然后起作用......但主页面没有刷新。

所以,问题是: 如何在LoadHistoryCtrl中调用loadQueue()来调用LeadApprovalCtrl中的方法,并刷新主页ng-repeat表?​​

1 个答案:

答案 0 :(得分:0)

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