I have this code:
app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, newEmployee){
$scope.addNewVehicle=function(){
// I want to open a new modal here
};
});
You should be able to open a second modal in much the same way as you opened the first...
Inject the $uibModal service into addEmployeeCtrl and make a call to $uibModal.open() passing in another modal configuration object.
app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, $uibModal, newEmployee){
$scope.addNewVehicle = function(){
var modalInstance = $uibModal.open({
templateUrl: 'addVehicle.html',
controller: 'addVehicleCtrl',
controllerAs: 'vehicleVm'
// Any other modal config properties here
}
modalInstance.result.then(closedCallback, dismissedCallback);
function closedCallback(){
// Do something when the modal is closed
}
function dismissedCallback(){
// Do something when the modal is dismissed
}
};
});
Related
I'm somehow newbie to $uibmodal and I want to show a form in popup style for each button that I have on my page, and I want to separate code of each popup form to their own js controller and template, not inside my main js controller and template.
here's my simpled code to show the form as a popup :
var modalInstance = $uibModal.open({
templateUrl: '/App/views/security/people/roleView.html',
controllerUrl: '/App/views/security/people/roleController.js',
controller: 'roleController',
size: 'lg',
resolve: {},
});
and here is my simpled code of my controller :
define(['app'], function (app) {
app.register.controller("roleController", ["$scope", "dataService", "$uibModal", "messageService",
function ($scope, dataService, $uibModal, messageService) {
debugger
}
]);
});
my problem is that whenever I click the button it give's me the error that my controller named as 'rolecontroller' is not registered.
The controller with the name 'roleController' is not registered.
thanks in advance.
You should add the controller in the initial bootstrap in your app.js like this
app.controller("roleController", ["$scope", "dataService", "$uibModal", "messageService",
function ($scope, dataService, $uibModal, messageService) {
debugger
}]);
I am working bootstrap modal directive . I need to open modal popup on ajax error method and popup is showing fine. but on button click inside modal , Where i need to dismiss modal , I am getting error
$uibModalInstance is not defined
First on module , I have registered correctly
var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);
then on angular controller , I have injected this directive correctly.
var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)
then I am calling this modal by following code inside same controller
var onError = function (reason) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = reason.statusText;
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController',
scope: $scope
});
};
$scope.cancelForm = function () {
$uibModalInstance.dismiss();
};
Now as you can see I have created separate html file for modal and below is html
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Close"
ng-click="cancelForm()" />
</div>
Now When I click close button I am getting error
ReferenceError: $uibModalInstance is not defined
at Scope.$scope.cancelForm (loginController.js:44)
Now I have gone though some different solution for same problem
Eg : http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview
But in this case above example is using two different controller but in my case I am using same controller ,and If i inject both $uibModal as well as $uibModalInstance then its not working
Yes uibModalInstance will be undefined.
You need to store the reference of your uibmodel and call close on that reference.
Like this :
var myModel = $uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController',
scope: $scope
});
and in close function:
$scope.cancelForm = function () {
myModel.close();
};
You need to injected $uibModalInstance in your Controller as follows
var loginController = function ($scope, $window, $routeParams, $uibModal, DataService,$uibModalInstance)
In your Controller from where you are opening modal, you need to inject the dependency $uibModal.
To open the modal you need to specify a html template, controller for the modal.
$scope.ErrorModal = function(index) {
var modalInstance = $uibModal.open({
animation: true,
backdrop: 'static',
templateUrl: "/PopUpErrorMessage.html",
controller: "popupErrorMsgController",
controllerAs: "PEMCtrl",
size: "md",
resolve: {
modalInstanceData: {
headerText: "Error",
bodyText:reason.statusText
}
}
});
modalInstance.result.then(function(receivedObject) {
//Modal closed
});
Now in your Modal Controller -popupErrorMsgController you can access the modal instance by injecting $uibModalInstance. Also you can inject the other parameters which you want to resolve in your modal controller
angular.module('yourApp')
.controller('popupErrorMsgController', popupErrorMsgController);.
popupErrorMsgController.$inject = ['$scope', '$uibModalInstance', 'modalInstanceData'];
function popupErrorMsgController($scope, $uibModalInstance, modalInstanceData) {
$scope.modalInstanceData = modalInstanceData;
$scope.cancelForm = function(){
var objectToSend = {};
$uibModalInstance.close(objectToSend);
}
}
In your modal controller you can assign the received parameters to the $scope of modal and access it inside your modal HTML template.
<h3>{{modalInstanceData.headerText}}</h3>
Hope this works for you!
I'm trying to get modals woking with angular bootstrap. I can launch the modal just fine, but I'm having some scope issues dismissing the modal.
When I launch the modal, I can specify a controller that I can call functions from, which works, but it seems to be a copy of the controller without a $parent and without any controller-local variables.
I need access to the return value of $uibModal.open() in order to close the modal, so I'm trying to store it in var modalInstance, which works fine when I'm within the scope of the controller, but the copy of the controller passed into the $uibModal service doesn't have the local variable modalInstance set.
I can get around this by storing the return object in the $rootScope, but that seems like a bad idea. Am I wrong? What's the best way to get access to modalInstance from the click handler passed into the $uibModal service? Can I avoid using the $rootScope?
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'MainCtrl',
});
// Wouldn't need to do this if I could access modalInstance in close handler
$rootScope.modalInstance = modalInstance;
}
$scope.close = function () {
console.log('close');
console.log(modalInstance);
// Works, but should I be using $rootScope like this?
//$rootScope.modalInstance.close();
// Doesn't work, modalInstance is undefined
modalInstance.close();
}
});
Angular instantiates a new instance of a controller whenever it is used, and it is the same for modal. So when you specify controller: 'MainCtrl' you're telling angular you want to instantiate one of those for your modal, which is rarely what you want.
Instead you should create a separate controller for the dialog, which can return values on closing using the $uibModalInstance service.
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'DialogCtrl',
});
....
}
});
app.controller('DialogCtrl', function($scope, $uibModalInstance) {
$scope.theThingIWantToSave = [];
$scope.cancel = function () {
$uibModalInstance.close($scope.theThingIWantToSave);
};
});
I have a angular modal window (for login). When user hits submit, i need to change the view to a home page (/myhome).
But doing $location.path = "/myhome" does not seem to be working from modal controller.
I open the Modal as follows:
$scope.openLoginModal = function () {
var modalInstance = $modal.open({
templateUrl: 'resources/html/login.html',
controller: 'loginController',
windowClass: 'app-modal-window'
});
};
And in my loginController, when user hits Submit i invoke doLogin function:
myApp.controller('loginController', function($scope, $modalInstance, $location, $http) {
....
$scope.dologin = function () {
...
$location.path="/myhome";
$modalInstance.dismiss('cancel');
....
}
Question
But the view never changes to /myhome.
Any ideas? Or alternative ways?
You're setting $location.path incorrectly. It's a setter function so the syntax is:
$location.path("/myhome");
Try that and see how it goes.
Im trying to make an angularjs Modal service.
I have an controller that opens some modal, in that modal i call original controller functions or access some variables, this part i can make it already.
I just cant close modal without clicking cancel or ok buttons, o want to make some operations in the modal, call some werbservices and the close modal manually.
Can anyone help me?
I made an working plunker here:
plunker
var modalInstance = $modal.open({
templateUrl: 'myModalContent2.html',
controller: ModalInstanceCtrl,
size: size,
scope: $scope
});
To close a $modal that you have opened you can follow these steps.
1) Inject $modalInstance into the controller that you specified when you created the modal. In your case you called it ModalInstanceCtrl.
2) Have a function in your ModalInstanceCtrl that calls .close() on $modalInstance.
your ModalInstanceCtrl should look something like this
angular.module('myCoolApp')
.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.closeModal = function(){
$modalInstance.close();
}
});
$scope.myData='all data can be';
$scope.myModalInstance = $modal.open({
templateUrl: 'app/myOpen.html',
controller: 'myOpenController',
size: 'lg', //modal open size large
backdrop: 'static',
keyboard: false,
resolve: {
myData: function () {
return $scope.myData;
}
}
});
$scope.modalClose = function (){
$scope.myModalInstance.close();
}