CODEWITHSUNDEEP
angularjsmodal-dialogangularjs-scope
Saurabh Gupta
Saurabh Gupta

Reputation: 81

Not able to update angular ui modal values back to the caller screen

I'm trying to invoke angularUI modal when I click on an element of a list. I can successfully load the modal, change the value in the modal, and come back to the caller screen. But I don't know how to update the list on caller screen. I tried various things like updating inside init() method of the controller of caller screen but that doesn't get called on modal close. I tried to assign as variable inside controller but that doesn't work either. My guess is that something needs to be done inside below method.

  modalInstance.result.then(function(personModified) {
    $log.info('personModified = ' + personModified.name + ' Finished at: ' + new Date());
  }, function() {
    $log.info('Modal dismissed at: ' + new Date());
  });
  };

Tried looping through like below:

modalInstance.result.then(function(personModified) {

  for (int i = 0; i < modalCtrl.people.length; i++) {
    if (modalCtrl.people[i]._id === personModified._id) {
      modalCtrl.people[i] = personModified;
    }
  }

  $log.info('personModified = ' + personModified.name + ' Finished at: ' + new Date());
}, function() {
  $log.info('Modal dismissed at: ' + new Date());
});
};

But modalCtrl is not recognized inside modalInstance.result.then(function(){}) method. I don't know what else can I do to update my list on caller screen. Any help would be hugely appreciated. Here is the plunker http://plnkr.co/edit/DR6Gadoh3rXegCrTOTzB?p=preview

Upvotes: 1

Views: 985

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

Pass array element index along with the current element while opening modal like modalCtrl.open('lg', person, $index), when success call of modal we can update this.people array of that specific index.

HTML

<div ng-repeat="person in modalCtrl.people">
    <a ng-click="modalCtrl.open('lg', person, $index)" class="undecorated-link">
        <p class="text-center">{{person.name}}</p>
    </a>
</div>

CODE

modalCtrl.open = function(size, selectedPerson, index) {

    var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        scope: $scope,
        resolve: {
            person: function() {
                return angular.copy(selectedPerson);
            }
        }
    });

    modalInstance.result.then(function(personModified) {
        $log.info('personModified = ' + personModified.name + ' Finished at: ' + new Date());
        modalCtrl.people[index] = personModified;
    }, function() {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

Working Plunkr

Hope this could help you, Thanks.

Upvotes: 1

Related Questions