I am currently using Angular-ui to display a modal with a form inside. Here is the code snippet:
app.controller('NewCaseModalCtrl', ['$http', '$scope','$modal', function ($http, $scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal-new-case.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
};
}]);
Additionally, I have another controller within the modal-new-case.html template. This controller is responsible for sending an HTTP request and then closing the modal. Here's the code for that:
app.controller('CreateCaseFormCtrl', ['$http','$scope', function($http,$scope) {
$scope.formData = {};
$scope.processForm = function() {
$http.post('http://api.com/proj', $scope.formData).
success(function(data, status, headers, config) {
console.log("Success " + data.id);
}).
error(function(data, status, headers, config) {
console.error("Error " + status + data);
});
};
}]);
When the modal-new-case.html template is loaded with:
ng-controller="NewCaseModalCtrl"
The corresponding HTML consists of:
<div ng-controller="CreateCaseFormCtrl">
<form ng-submit="processForm()">
<button class="btn btn-primary" ng-click="processForm()" >OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</form>
</div>
To achieve the desired outcome of running the processForm() function and then closing the modal upon success, you can call the "cancel()" function. However, referencing it from the CreateCaseFormCtrl controller might be tricky.
If you have any insights or suggestions on how to tackle this issue, I would greatly appreciate your assistance. Please note that my familiarity with Angular is limited, so a simple and straightforward solution would be preferable even if not ideal for long-term production use.