CODEWITHSUNDEEP
angularjsangular-ui-modal
Abdelrhman Adel
Abdelrhman Adel

Reputation: 1187

How does angular "$uibModalInstance.close(data)" work?

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?

Upvotes: 19

Views: 40717

Answers (2)

Angel Santiago
Angel Santiago

Reputation: 41

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.

Upvotes: 3

agenaille
agenaille

Reputation: 152

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)

Upvotes: 10

Related Questions