I have a list of groups in my application. when i click on the group, a modal window opens using the modalController with the group related data. form this modal user can make changes to the group. now when i make any change in the group and save it. the changes reflect in the list in the background but not in the modal box.
What i can do here?
:(( suplicate::((
Modals in anuglar , regularily has their own instance and controller , they dont get their parrent scope(scope of your view)
So you have to Send this scope(scope of your view) with a resolve property like this :
There should be a resolve property in your modal instance , where you can resolve anything you want ;
yourApp.controller('yourViewController',function($scope,...){
$scope.openModal = function (size) {
var modalInstances = $modal.open({
templateUrl: 'yourModalTemplateURL.html',
controller: 'YourModalController',
size: "YourModalSize",
resolve:{
info :function(){
// you want to see your scope later in your modal
// so you have to resolve it and sent it via this property
return $scope;
}
}
});
};
})
And in your ModalController you can inject that info
app.controller('YourModalController',function($scope,info){
console.log(info); // will log the scope of your controller
});
Related
I'm trying to pass back a value from a uibModal. I can define the return if the user clicks the modal's close button
$scope.close = function () {
$modalInstance.close($scope.editMade);
};
But this doesn't work if the user click the backdrop area.
How can I define a return value for that particular event?
When you click on the backdrop outside, it does a dismiss internally.
Try using this inside modal:
$modalInstance.dismiss($scope.editMade);
And use this to handle data:
instance.result.then(function(){
//Get triggers when modal is closed
}, function(){
//gets triggers when modal is dismissed. You can basically handle data here
});
Check this working plunker. It uses the dismiss as I mentioned
http://embed.plnkr.co/YdWmqYPFBNbv4vhQZc4t/
Passing custom data to your parent controller when modal is dismissed:
Code in Modal Controller:
$scope.$on("modal.closing",function(){
$rootScope.$broadcast("modalClosing",$scope.editMade);
});
Then in your parent controller:
$scope.$on("modalClosing",function(event,value){
console.log(value); //value should be $scope.editMade
});
You can learn more by reading the documentation here:
https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs
In the modal controller, you can do something like this:
$scope.$on('modal.closing', function(event, reason, closed) {
if (reason == "backdrop click" || reason == "escape key press")
{
event.preventDefault();
$uibModalInstance.close({"data": somedata});
}
});
This way you'll always get the success callback on modalInstance
modalInstance.result.then(function(response) {
// here response will be whatever is passed. in this sample {"data": somedata}
});
I have a main controller for my profile edit page, from where users can add their education, in a modal window. The modal has it's own controller. The user can add as many education items they want and they can modify the existing ones.
Now for my issue. I want the modal controller to take care of both adding a new item and updating an existing one. The difference is that on update, the controller should receive a fully populated education object, which it should update. I don't know how to pass this object from the main controller to the modal controller. I've seen some ways of passing data between controllers via services, but that seems too much of a hassle, and it doesn't make sense to me to use a service in this particular case.
My main controller creates modals like so:
vm.openEducation = function(){
$modal.open({
templateUrl: "some.html",
controller: "SomeController",
controllerAs: "vm",
size: 'lg'
}).result.then(function (education) {
vm.educations.push(education);
});
}
And the child controller (which currently only supports insert, hence the empty init of vm.education):
function SomeController($scope){
var vm = this;
vm.education = {}; // or get from parent controller
vm.save = function () {
$scope.$close(vm.education);
};
vm.close = function () {
$scope.$dismiss();
}
return vm;
}
You can use $rootScope.$broadcast to send data from the modal and then $scope.$on to receive that data anywhere else.
For example:
// in your modal
$rootScope.$broadcast('education:updated', yourDataObj)
// in your controller
$scope.$on('education:updated', function(e, data) {
console.log(data)
})
Note that the $broadcast will be picked up by anything that's listening for it, so if you have multiple controller instances you will get multiple console.log messages
I want to ask if the parent scope destroy, does the child scope will also be destroy?
I ask this question is because i'm using the ngdialog to create some modal dialogs.
There are 2 dialogs, A -> B, we can open dialog A from a web page, and dialog A is parent of dialog B, click button on A to open B.
I want to open dialog B and close A(the parent of B) at the same time, and the data in scope B are all missing. So i think maybe it is caused by this. can anyone help me to get better understanding on this?
dialogACtrl:
$scope.selectServer = function (serverType) {
$scope.serverType = serverType;
$scope.closeThisDialog('close'); //close current dialog
var newScope = $scope.$new(true);
var modalInstance;
modalInstance = ngDialog.openConfirm({
template: 'servers/templates/dialog-b.tpl.html',
scope: newScope,
controller: 'dialogBCtrl',
resolve: {
serverData: function () {
return null;
},
delegate: callbackWrapper
}
});
siteScopeModalInstance.result.then(callback);
ngDialog source:
open: function (opts) {
...
scopes[dialogID] = scope = angular.isObject(options.scope) ? options.scope.$new() : $rootScope.$new();
performCloseDialog: function ($dialog, value) {
...
scope.$destroy();
When a parent scope is destroyed, it basically cascade destroy it's child scopes tree.
I suspect this has nothing to do with parent/child scopes
Each instance of the dialog will initialize it's own controller instance.
This means that when you open the second dialog, it has it's own scope that is different than the scope in the first dialog.
Any data you need to pass from one to the other would need to be either done with a resolve or by using a service to share data across controllers.
Without any code posted in your question it is hard to help further
I have a input box in modal popup , i want that value in my main controller which invoked the modal.
Easy way:
//Modal controller
$rootScope.$broadcast('modal:nameOfModal:onSave', { data: data })
//Any other controller
$scope.$on('modal:nameOfModal:onSave', function(event, data) { ... } )
Right way:
Modal creator
Factory with methods representing each modal type you need
Each method method of Factory (like Factory.confirmationWindow()) returning a promise that should be handled separately in controllers that rise appropriate modal
Call something like in your controller
Controller.propotype.openModal = function() {
ModalsFactory.confirmationModal().then(function(result) {
//using result inside of your controller
//if clicked ok
}).catch(function() {
//behavior to be called when modal canceled
});
}
Pros:
Totally separates logic
Allow to define different behavior of same modals in different controllers
Cons:
ModalsFactory will be big file
The 1st controller has an Id.
The 2nd controller has a function that takes the id and opens a modal.
I want to pass the id from the 1st controller to the 2nd controller and open the 2nd controller's modal while staying in the 1st controller.
There is no relationship between these controllers.
I tried to use $rootScope.broadcast but things are not working as expected.
How can I achieve this feature ?
EDIT:
1st controller:
$scope.getId = function(id){
$scope.id = id;
$rootScope.$broadcast("info", $scope.id);
}
2nd controller:
$scope.viewModal = function(id) {
$scope.id = id;
var modalInstance = $modal.open( {
templateUrl: 'src/web/viewModal.html',
controller: 'viewCtrl',
size: 'lg',
resolve: {
id: function () {
return $scope.id;
}
}
} );
}
$rootScope.$on("info", function(event, id) {
$scope.id = id;
$scope.viewModal(id);
});
I am not sure how the modal from 2nd controller gets invoked while I am clicking on $scope.getId from 1st controller.
I am kind of apprehensive to use Services at this stage because that will involve lot of code change to the existing setup.Please advise.
Communicating between controllers should always be done through a service.
For the modal part you could either figure out your own logic or you could simply use UI-Boostrap Modal. It supports throwing data at it so you could basically have an async request populating in your modal based on an ID you sent it. This is done by giving the modal its own scope and it each modal will have a resolve that you can use to make sure the modal has the correct data in its scope.