AngularJS open modal from controller
Solution 1
I would strongly suggest you write a separate controller for you modal. That will greatly help you to maintain your code later.
If I understand correctly (from your tags) you use an this one: https://angular-ui.github.io/bootstrap/ From your main controller, open the modal:
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
note the resolve function, you can pass extra parameters like this to modal controller.
In modal controller:
angular.module('your.awesomeApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
note the third parameter, it will be values, that you have passed.
Solution 2
You can use ui.bootstrap's components which include a modal. You won't have to use a separate controller.
Shital
I am python developer around 4 years of development experience including js, angular, python. Worked in areas like networking, IoT, finance.
Updated on June 28, 2022Comments
-
Shital almost 2 years
I am new to angularjs, and writing an application where a template(inventory.html) containing grid is opened with , it has a validate button at bottom of grid, which calls validate() to validate selected grid rows, before that i need a modal to popup and take user name as input and then process further.
my validate function is inside controller of template(i.e. inventory.html) . I have a app.js which contains routing info and controller.js which contains controllers for all templates.
My question is, if there is any way that I can open modal from validate(), take user input and proceed further without writing separate controller for modal. (I have a separate userinput.html for modal.)
(Sorry If my question is not clear. Plz help I am stuck with this and have tried many options from web)
// This is my controller
var app = angular.module('app', []); app.controller('InventoryCtrl',['$scope','$location','$http','$modal',function($scope, $location, $http,$modal{console.log("Inside inventory ctrlr"); // Validate Function for validate button click $scope.validate = function() { $scope.user = null; $scope.build = null; // Show modal to take user inputs for environment var modalInstance = $modal.open( { controller : "inputModalCntrl", templateUrl : "../partials/addEnvironment.html", resolve: { $callback: function () { return function(param,user,build){ /* This function print value(param) dispached in modal controller */ console.log(param,user,build); $scope.user = user; $scope.build = build; }; }, $send: function(){ return function(){ /* This function send param for the modal */ return {param1:"Hello Word Main"}; }; } } }); // This is further process of function postdata = {}; var dlist = $scope.gridApi.selection.getSelectedRows(); postdata['dlist'] = dlist; $http({ url: "/api/check", data: postdata, method: "POST" }) .success(function (response) { alert(response);}) .error(function () { alert('Error getting data');}); }; }]);
and this is modal controller
app.controller("inputModalCntrl", function($scope, $modalInstance, $callback, $send) { $scope.init = function(){ /* This function print value(param) dispached in main controller */ console.log($send); /* This send data to main controller */ $callback({param1:"Hello Word Modal", user :user, build : build}); }; });