Closing A Modal in AngularJS UI - angularjs

Question

Quite new with AngularJS (and AngularJS UI) and I am unable to close a modal window.
The HTML code as follows:
<div>
<div data-ng-show="agencies || agencies.length > 0">
<div>
<h3>
Agencies
</h3>
</div>
<div>
<span class="glyphicon glyphicon-cloud-upload"></span> Add
</div>
</div>
</div>
Controller:
'use strict';
app.controller('agencyController', function ($scope, $modal, agenciesDataService) {
$scope.agencies = [];
$scope.agency = null;
init();
function init() {
getAgencies();
};
function getAgencies() {
var onResponse = function (results) {
$scope.agencies = results.data;
};
var onError = function (error) {
alert(error.message);
};
agenciesDataService.getAgencies()
.then(onResponse, onError);
};
$scope.showModalAddAgency = function () {
var modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
};
$scope.addAgency = function addAgency() {
var currentAgency = this.agency;
var onResponse = function (results) {
currentAgency.Id = results.data.Id;
currentAgency.Name = results.data.Name;
currentAgency.AgencyPortalAccountId = results.data.AgencyPortalAccountId;
$scope.agencies.push(currentAgency);
currentAgency = {};
// HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL?
};
var onError = function (error) {
//alert(error.message);
}
agenciesDataService.addAgency(currentAgency)
.then(onResponse, onError);
};
});
Pretty much, after making the POST request, I want to close the modal window, but I don't have any idea how. Not sure how I can reference the modal window which I opened.
Any insight appreciated.
Update:
My modal's html includes an Save and Cancel button.
<div class="modal-footer">
<button class="btn btn-primary normal-button"
ng-click="addAgency()">Save</button>
<button class="btn btn-warning" ng-click="$dismiss()" style="width:100px;">Cancel</button>
</div>
The modal does close when I hit the Cancel button. What I want to achieve is being able to close the modal when the addAgency function is completed.

Answer 1

You need to save your modal instance in the $scope so that you have a reference to it later.
So you'd init your $scope.modalInstance = null; at the top.
Then you'd open your modal like this:
$scope.modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
To close, you would then call $scope.modalInstance.close(); (which would go where you have your // HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL? comment.
Here's a plunkr that shows how to do it: EXAMPLE

Answer 2

To close your modal you have 2 functions : "close" and "dismiss".
Let say that the end of your modal html file looks like that :
<div class="modal-footer">
<input type="button" class="submit" value="Save" ng-click="ok()" />
<input type="button" class="cancel" value="Cancel" ng-click="cancel()" />
</div>
All you have to write in your modal controller is that :
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
};
$scope.ok = function(){
// you can pass anything you want value object or reference object
$modalInstance.close("clicked ok");
};
And if you want to know if the user clicked on "cancel" or "ok" you have to change your function "showModalAddAgency" like that :
$scope.showModalAddAgency = function () {
var modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
modalInstance.result.then(function (resultOk) {
// OK
}, function (resultCancel) {
// CANCEL
});
};
I hope my answer fit you.
Have a nice day !