javascript - How to refresh ng-repeat on modal close? -
the setup: have page (angular) repeater in it.
<tr ng-repeat="row in results.leads"> <td>{{row.submittedbyname}}</td> within repeater, there column button opens modal alter row's data. modal, in turn, has button saving of record, closes current modal, opens new modal, let's user enter comment, saves, , closes modal.
this works great. fantastic.
what doesn't work is... when modal closes, ng-repeat supposed refresh, actions taken in modal remove rows data. if refresh page manually, row vanishes - without refreshing page, nothing happens.
the angular controller: 'use strict';
angular.module('leadapproval.controllers', []). //this main page core method - data loaded here, , in-table-row buttons work 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 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 removed 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 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 removed queue.'); } }); }; $scope.editlead = function (id) { $modalinstance.close(); window.location = "/customers/edit/" + id; } $scope.cancel = function () { $modalinstance.dismiss('cancel'); }; }) ; the thing i've noticed $scope.loadqueue(); (as seen 17 lines up) throws error undefined object. reason "leadhistoryctrl" can't see scope in "leadapprovalctrl", , can't refresh ng-repeat. i've tried copying loadqueue function leadhistoryctrl, no real effect - code functions... main page doesn't refresh.
so, question: how loadqueue() call in loadhistoryctrl call method in leadapprovalctrl, , refresh main page ng-repeat table?
typically want move function service if need access multiple controllers. in angular cant communicate directly controller controller. can use $scope.broadcast / $scope.emit trigger this. what's correct way communicate between controllers in angularjs?
Comments
Post a Comment