AngularJS $modalInstance - Can i do this in one controller?
I was struggling with the same problem and the best thing I came up with was to use anonymous function as a modal controller. In that way all the logic is in the same controller and you don't have to create separate controller for each modal window.
This would look like this:
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
$scope.data = data;
$scope.ok = function() {
$modalInstance.close();
};
$scope.closeModal = function() {
$modalInstance.dismiss();
};
}
]
});
};
})
})();
PS. Haven't tested code above, just put it together from your provided code and fragments from one of my projects.
NewZeroRiot
Dad, g33k, .NET/JavaScript developer, guitarist, avid runner, reader. Likes ale. Has sisu.
Updated on June 21, 2022Comments
-
NewZeroRiot about 2 years
I've spent some time having a play with the AngularJS Bootstrap popup, and for intents it's working great, but what i'd like to do is bind it, and it's dependant script to the same controller, what i can't get working is the close button now though. If i create a NEW controller, and inject $modalInstance it works great and i can wireup the close button without any issues at all, but i don't want a second controller, it seems to be over complication: i want all my controller logic in the formController really.
Why would i actually want two controllers? Passing the scope between two controllers just seems overkill to me, and the larger a project becomes the more un-managable it will become. Am i trying to over-simplify this unnecessarily? :)
The script:
(function(){ var app = angular.module('ngModalDemo', ['ui.bootstrap']) .controller('formController', function($scope, $modal){ $scope.openModal = function () { var modalInstance = $modal.open({ templateUrl: 'SomeModal.html', controller: 'formController' }); }; $scope.closeModal = function () { // Code needed here :) }; }) })();
The HTML body (excuse the HTML in script for the purposes of the DEMO):
<div ng-controller="formController"> <button class="btn btn-default" ng-click="openModal()">Let's do some stuff!</button> <script type="text/ng-template" id="SomeModal.html"> <div class="modal-header">Do some stuff in this modal y'all.</div> <div class="modal-footer"> <button class="btn btn-info" ng-click="closeModal()">Close</button> </div> </script> </div>
The answer based on Kaspars' input :)
(function(){ var app = angular.module('ngModalDemo', ['ui.bootstrap']) .controller('formController', function($scope, $modal, $log){ $scope.openModal = function () { var modalInstance = $modal.open({ templateUrl: 'SomeModal.html', controller: [ '$scope', '$modalInstance', function($scope, $modalInstance){ $scope.closeModal = function () { $modalInstance.close(); }; } ] }); }; }) })();
-
NewZeroRiot about 9 yearsThanks Kaspars, that worked a treat, i've added the actual code which i've simplified for reference to the original question :)