Update $scope collection upon closing modal

Question

I'm having the most difficult time trying to find a way to make sure the parent scope's collection is updated with the saved information from a modal.

The parent has a collection of event speakers, and the modal adds one speaker to the event. I want for the new speaker to be added to the page once the modal OK button is clicked.

The data is saved and the modal closes, but the model isn't updated unless I refresh the page.

Here's my controller method that updates the collection of speakers. $scope.speakers gets bound to a repeating object in the page.

$scope.updateSpeakersList = function () {
    factory.callGetService("GetSpeakers?eventId=" + $scope.event.eventId)
        .then(function (response) {
            var fullResult = angular.fromJson(response);
            var serviceResponse = JSON.parse(fullResult.data);

            $scope.speakers = serviceResponse.Content;

            LogErrors(serviceResponse.Errors);
        },
        function (data) {
            console.log("Unknown error occurred calling GetSpeakers");
            console.log(data);
        });
}

Here's the promise where the modal should be calling the previous method, and therefore updating the page.

$scope.openModal = function (size) {
    var modalInstance = $modal.open({
        templateUrl: "AddSpeakerModal.html",
        controller: "AddSpeakerModalController",
        size: size,
        backdrop: "static",
        scope: $scope, 
        resolve: {
            userId: function() {
                return $scope.currentUserId;
            },
            currentSpeaker: function () {
                return ($scope.currentSpeaker) ? $scope.currentSpeaker : null;
            },
            currentSessions: function () {
                return ($scope.currentSpeakerSessions) ? $scope.currentSpeakerSessions : null;
            },
            event: function () {
                return $scope.event;
            },
            registration: function() {
                return $scope.currentUserRegistration;
            }
        }
    });

    modalInstance.result.then(function (savedSpeaker) {

        $scope.savedSpeaker = savedSpeaker;

        $scope.updateSpeakersList();

    }, function () {
        console.log("Modal dismissed at: " + new Date());
    });
};

Why is the model not updating?

Since you are passing the scope, `scope: $scope`. can't you update the speaker from the ok function? `$scope.ok = function () { $scope.updateSpeakersList(); $modalInstance.close($scope.item); };` — sch, Oct 16 '15 at 07:11
Thanks. I just tried that, and while I don't get an error, the speaker list doesn't actually update. I tried with and without also calling `$apply()` — Will Strohl, Oct 16 '15 at 07:27

score 0 · Answer 1 · answered Oct 16 '15 at 07:09

0

It's hard to know for sure without having a minimal example that reproduces the problem, but your problem might be that you are updating a 'shadow scope'. This is a pecularity in Javascript which causes the object to be copied instead of modified.

Try adding $scope.$apply() after doing the change in updateSpeakerList().

answered Oct 16 '15 at 07:09

wvdz

16,251
4
53
90

No. Doing that in the controller or the model promise gives me that dreaded digest error. :( – Will Strohl Oct 16 '15 at 07:16
Try supplying us with a Short, Self Contained, Correct (Compilable), Example (http://sscce.org/), otherwise it will just be guess work. – wvdz Oct 16 '15 at 08:36

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Check this post and then play around with it. AngularJS - Refresh after POST

What worked for me was pushing the data to my scope on success then setting the location, so after posting new data mine looked like:

$scope.look.push(data);
$location.path('/main');

edited May 23 '17 at 12:14

Community

1
1

answered Oct 16 '15 at 17:15

venturz909

330
2
12

Sorry, that didn't help... but the fact that the location didn't change and the data didn't update when trying your solution led me to figure this out on my own... – Will Strohl Oct 17 '15 at 06:33

score 0 · Answer 3 · answered Oct 17 '15 at 06:38

The issue here isn't that my data wasn't updating necessarily... the real issue is that the moments that I was attempting to update it were the wrong moments for how my app is put together. I was attempting to update the underlying model BEFORE the updates were available, without realizing it. The AJAX calls were still in progress.

Within my modal, when OK is clicked, it runs through a few different GETs and POSTs. I was calling the update outside of these calls, assuming that it would be called sequentially once the AJAX calls were done. (This was wrong.)

Once I moved the $scope.updateSpeakersList() call to be within the final AJAX success call to my factory, everything appears to be working as desired.

Update $scope collection upon closing modal

3 Answers3