Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
155
rated 0 times [  157] [ 2]  / answers: 1 / hits: 21319  / 10 Years ago, fri, january 9, 2015, 12:00:00

I am using Angular-ui to pop up a modal with a form in it. My code is:



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 () {
});
};
}]);


And then I have another controller that is inside the modal-new-case.html template, and I want it to run an httpd request and then close that modal, here is that code:



    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.log(Error + status + data);
});
};


}]);



Okay so inside my modal-new-case.html template, which is loaded when I do:



ng-controller=NewCaseModalCtrl


I have this HTML:



<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>


So if you see, what I really want to do is to run that processForm() function, and when it returns with a success, I want to THEN call the function that will close the modal, which I believe cancel() would be fine.



But I don't know how to refer to it from the CreateCaseFormCtrl controller.



I appreciate any thoughts and help, and I would like to add that I am very unsophisticated when it comes to Angular, so if this is complicated, please remember that maybe I am not 100% clear on what every single thing in Angular is such as the factories and such. I guess I'm saying I'm very happy with a dirty solution that's fairly simple, since this isn't going to be long-term production programming code.


More From » angularjs

 Answers
10

Step 1: remove the



ng-controller=CreateCaseFormCtrl


from



<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>


Step 2: Change



controller: 'ModalInstanceCtrl',   =>   controller: 'CreateCaseFormCtrl'


in



var modalInstance = $modal.open({
templateUrl: 'modal-new-case.html',
controller: 'CreateCaseFormCtrl', //Add here
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});


Step 3: In CreateCaseFormCtrl add a service called $modalInstance



app.controller('CreateCaseFormCtrl', ['$http','$scope', '$modalInstance', function($http,$scope, $modalInstance) {


Step 4: Add the close and ok functions



$scope.cancel = function () {
$modalInstance.dismiss();
};


and $modalInstance.close(); in



$http.post('http://api.com/proj', $scope.formData).
success(function(data, status, headers, config) {
console.log(success + data.id);
$modalInstance.close(); //add here
}).
error(function(data, status, headers, config) {
console.log(Error + status + data);
});

[#68270] Tuesday, January 6, 2015, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
myrap

Total Points: 407
Total Questions: 105
Total Answers: 109

Location: Cambodia
Member since Thu, Oct 7, 2021
3 Years ago
myrap questions
Tue, Feb 8, 22, 00:00, 2 Years ago
Wed, Jan 15, 20, 00:00, 4 Years ago
Thu, Oct 24, 19, 00:00, 5 Years ago
Thu, Oct 3, 19, 00:00, 5 Years ago
Mon, Aug 12, 19, 00:00, 5 Years ago
;