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.
Related
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
}
};
});
I am developing an Web Application using Angular JS. I am new to Angular JS. in my app I am using bootstrap.ui JS for Angular js. But I am having a problem with bootstrap modal controller. I open the bootstrap modal with new controller instance. Then I want to fire event back to parent controller when a button of modal is pressed.
I open Bootstrap modal when a button is clicked like below in a controller
var app = angular.module('memeApp',['ngRoute','ui.bootstrap','blockUI','ngFileUpload'],function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('DeleteConfirmModalController', ['$scope','$modalInstance','data',function ($scope, $modalInstance,data) {
$scope.closeDeleteConfirmModal = function () {
$modalInstance.dismiss('cancel');
};
$scope.deleteData = function()
{
//I want to call deleted function of DefaultController that opened current controller.
}
}]);
app.controller('DefaultController', ['$scope', 'Upload', '$timeout', '$http','$modal', function ($scope, Upload, $timeout , $http, $modal) {
$scope.deleted = function(param)
{
alert('deleted')
}
$scope.deleteTemplate = function(id,url)
{
var modalInstance = $modal.open({
controller: 'DeleteConfirmModalController',
templateUrl: $scope.deleteConfirmModalUrl,
resolve: {
data: function () {
return { id: id, url: url };
}
}
});
}
}]);
Let me explain my code above. When a user click a button in DefaultController, deleteTemplate function will be called. So that function open bootstrap modal creating new instance of DeleteConfirmModalController. When user click the delete button of bootstrap modal, deleteData function of modal controller will be called.
So I commented what I want to do inside that function. I want to call deleted function inside DefaultController. How can I call that function of parent controller from modal controller?
You can do so easily by passing the function you want to run as a callback to the modal.
vm.deleteData = function() {
// do something
}
Then pass to
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'vm.deleteConfirmModalUrl',
controller: 'DeleteConfirmModalController',
controllerAs: 'vm',
resolve: {
deletedCallback: function() {
return vm.deleted; // notice that I am passing a reference of `deleted` function
}
}
});
Then, inside the modal controller I wire an invocation to this callback function by a button click
.controller('ModalInstanceCtrl', function ($uibModalInstance, deletedCallback) {
// this will run on an ng-click
vm.runDeleted = function() {
if (angular.isFunction(deletedCallback)) {
deletedCallback("me");
}
}
...
}
I use angular.isFunction to test if the reference I passed to the modal controller is indeed of that of a function, and if it is, I run it, and I pass some value (in this case the string me) into the callback.
This code will run on the DeleteConfirmModalController controller.
Example plunk
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 controller tied to my view via routing.
Example in App.js I have the following:
when('/about', { templateUrl: 'views/about.html', controller: 'appAboutCtrl' }).
I have another controller for Modal specific actions. I need this since it is a login action that applies across pages, and for that reason, it is it's own controller versus repeating the login functionality in every controller.
My modal does what it is supposed to do, but when I close it, I need it to update the $scope on the page to show/hide an item by setting something akin to:
$scope.isLoggedIn = true;
However, the scope is not updating. I have seen something like this here: https://github.com/angular-ui/bootstrap/issues/2110#issuecomment-54551321 but given the complexity of my login, I need it to be in its own controller... separate of the controller driven my view.
Here is the call to my Modal and controller specific modal in the controller tied to the view I open it from (about.html and appAboutCtrl):
// Open Modal for Login
$scope.login = function () {
var modalInstance = $modal.open({
templateUrl: 'templates/login.html',
controller: 'appLoginCtrl',
size: 'lg'
});
}
Here is where I try to set the scope on modal close in appLoginCtrl:
$scope.ok = function () {
$modalInstance.close();
$scope.isLoggedIn = true;
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
$scope.isLoggedIn = true;
};
I can reload the view on modal close, but can't set the $scope as follows:
$scope.ok = function () {
$modalInstance.close();
$route.reload();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
$route.reload();
};
How can I set the $scope on Modal close so that when I close the modal, my view registers the change? My $scope is tied to a ng-show to show/hide an item on login.
You can use resolve option to bind variables.
var modalInstance = $modal.open({
templateUrl: 'templates/login.html',
controller: 'appLoginCtrl',
size: 'lg'
resolve: {
isLoggedIn: function () {
return $scope.isLoggedIn;
}
}
});
or you can pass the parent controller's scope to the modal scope
var modalInstance = $modal.open({
templateUrl: 'templates/login.html',
controller: 'appLoginCtrl',
size: 'lg',
scope: $scope
});
I'm using Angular UI Bootstrap. If a modal is open, I'd like to display true. If it's not open, I'd like to display false. Is there a way to do this within the HTML?
I tried using the following code, but it's wrong:
<code>myForm.$modalStack.opened={{myForm.$modalStack.opened}}</code>
Any thoughts on how to do this correctly?
Below the relevant code I'm using to trigger the modal:
HTML:
<button ng-click="myForm.agreement()">
Code in Controller:
.controller('MyFormCtrl',
function ($location, $stateParams, $modal, $scope, $http) {
var myForm = this;
// . . .
myForm.agreement = agreement;
function agreement() {
$modal.open({
templateUrl: 'views/agreement.html'
})
});
The opened property returned by $modal.open is a promise you can hook into.
So, using their example, see here - http://plnkr.co/edit/PsEqTIy8CDUU88HMLxbC?p=preview
$scope.modalOpen = false;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.opened.then(function () {
$scope.modalOpen = true;
});
// we want to update state whether the modal closed or was dismissed,
// so use finally to handle both resolved and rejected promises.
modalInstance.result.finally(function (selectedItem) {
$scope.modalOpen = false;
});
};
You want to call the promises and then do whatever you need. .opened is a promise for when the modal opens, and .result is a promise for when the modal closes. So using this idea, you would use $scope.modalOpen as your boolean.