19

The official documentation of AngularJS does not contain anything that describes how $uibModalInstance.close works, in the following code fragment, scope.close is a method used to close the modal window and pass an object to the caller controller

var app = angular.module('myApp');

app.controller('ModalController', ['$uibModalInstance', modalControllerFn]);

function modalControllerFn($uibModalInstance) {
    var scope = this;
    
    // some data object
    scope.data = {key1: "value1", key2: "value2"};
    
    scope.close = function() {
        $uibModalInstance.close(scope.data);
    }
}

Question (1)

Does passing anything belonging to the modal scope using `$uibModalInstance.close` (non-literal value, i.e: `scope.x`) prevent angular garbage collection from destroying the entire modal scope? Is this a scenario for causing memory leaks?

Question (2)

How does angular `$uibModalInstance.close(data)` exactly work?
David Klempfner
  • 8,700
  • 20
  • 73
  • 153
Abdo Adel
  • 1,177
  • 2
  • 17
  • 30

2 Answers2

10

Please have a look at the JavaScript example on Angular UI Bootstrap's website here: Angular UI Bootstrap Modal

Scroll down just a bit and click the JavaScript tab to see the code.

The important part is this:

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

Above, the selectedItem variable is what is passed into:

$uibModalInstance.close(rightHereGetsPassedAsResult)
techraf
  • 64,883
  • 27
  • 193
  • 198
agenaille
  • 152
  • 1
  • 3
  • 3
    Thanks for your time, but, this does not answer any of my questions, may be you are trying to answer indirectly ? please elaborate more – Abdo Adel Apr 21 '16 at 09:18
  • 2
    Ah got it, you are trying to explain how to use it, but this is not my question – Abdo Adel Apr 21 '16 at 11:28
3

var modalInstance = $uibModal.open({template:tmpl, controller: ctrlr})

In the above code $uibModal.open() returns a promise to be resolved or rejected.

If it is resolved, when the user clicks your 'ok' button, you may have a statement that does something afterwards like..

modalInstance.result.then(function (data) { console.log('user clicked ok', data) })

On the $scope of the controller for your modal instance you will have a function as the ng-click for your 'ok' button

$scope.ok = function() { $uibModalInstance.close(data); }

The data you pass to $uibModalInstance.close(data) in your $scope function is returned as the data result in the aforementioned statement.

Angel Santiago
  • 41
  • 3