I have a link which on clicking opens a modal. Am using angular ui modal. Inside modal I have a row with two inputs and an Add button. On clicking Add button, a new row is added with the text I entered in inputs. I have a done button which closes the modal. On opening the modal again, my newly added row is missing.
Everytime you create a new Modal, you'll be running the code behind it again, effectively erasing any changes you make to it, even if you are using the same controller as the page you create the modal from.
To do what you want to do, you'll have to;
var modal= $uibModal.open({
templateUrl: ''
}
});
modal.result.then(function(array){
$scope.rowArray = array
}
Your modal close function will then be;
$uibModalInstance.close($scope.rowArray);
This example will work if you're using the same controller for the modal and main HTML page, otherwise you'll need to have a resolve for your $uibModal.open to pass it through to the modal controller, but also add your rowArray to the dependencies of that controller.
Hope it helps!
Related
I am new to AngularJS so pardon my ignorance.
I have a page with dropdowns, textboxes and buttons within a controller say ControllerA. On button click I open a modal which has its own text boxes and buttons. Modal and the page are all in the same html.
I would like to know when or what conditions are needed for me to think of creating a new controller?
I mean should controllerA handle the modal's text box population and button click function or should I use a new controller for handling the modal?
I have a list page, when click a row, will popup a modal view page to show its content, then in it click edit button, I want the popup view page can direct to edit page, that is from one modal view page redirect to another modal edit page, I use angularjs modal to show view page, so how can I change modal content to edit page?
You may fetch your template using $templateCache.get() or making http request.
Then compile it using $compile(template). After template compiling you can put your template anywhere you want in the DOM by using jQuery/jqLite — all angular bindings will work.
thanks to Girafa, I use a simple way(although code is some verbose). I create two Controller and when open view modal, pass $scope in the Options, then when click edit button, first call cancel current modal, then open edit view. like this:
$modalInstance.close('cancel');
$scope.openedit(id);
I am using ng-repeat for iterating through a list of objects, and for each item in the list there are child objects which are edited in a Bootstrap modal popup. I am unable to use the Angular modal service as it conflicts with the Bootstrap CSS already in use on the page. Angular modals would let me take values back from the modal popup on modal close, but I am unable to use it due to existing code.
To work around this problem, I am passing the child object to the function that opens the modal popup. In this function, I assign this passed object to an Angular model/jQuery Object (say "x") (either way I tried, it gives same result) so that I can update this new object x with the changes done in the modal popup.
I believe that these variables as copied and points to the same object, when I update one, it should update the other one and so my original Angular model should be updated as well. But, to my surprise, the original model is not updating until I open the modal popup again. When I open the modal popup again, it does not update variable "x" but merely is updated with the ng-model I use on page.
To debug this further, I printed my ng-model on page and it is not updated till modal popup is opened again. To contrast this further if I alert length of this ng-model, it is updated (shows the changes I made in modal popup) but the ng-model object on page does not show new values.
I understand this is more of a theory and less code but I am not sure what part of my code would help find the problem. Kindly let me know and I will try sanitize my code and share.
Update:
While further digging, it looks like the model is updated but it did not reflect on page. So if for example on page I have condition that if no child objects, show Add button (edit otherwise), it does not change from add to edit button when I open modal first time and add values to child objects. When I open modal popup again, it changes link from add to edit even if I close modal popup without changes. So it is a problem with screen refreshing as such (my model updates reflecting on screen) instead of actual model update.
I have one requirement. I am using Angularstrap Modal for Modal Dialogue(User's Terms and Condition).
On this modal Dialogue Two buttons are there "Agree" and "Don't Agree".
I have two links. on clicking on each links different views are opened.Both views are associated with different controller.
And My requirement is like,I need to open Terms Dialogue whenever new user comes and that needs to open on click event of both link.
Currently I have to write modal code in each controller.(Same function to open modal and for the modal's buttons)
Now,I want to generalize the code for the modal and modal's button.I want to write once and I want to use that code whenever I need to open (any) Modal
What can be the Approach or is it possible?
This is skeleton pseudo code for my dialog service:
//modal container is the template with backdrop
//and other modal elements (title, body, buttons, close button)
loadContainerTemplate()
//the actual html content for the modal body
.then(loadDialogTemplate)
.then(init);
function init() {
//append container to body
//append dialog template to modal body
//create new scope for the modal
//set up buttons, title, width, etc.
//listen for ESC keypress
//initialize modal controller if needed
//prepare close function (destroy scope, remove dom, execute close callbacks, etc)
//compile modal html against scope
}
My service would accept arguments such as modal template's url, title, width, buttons and their callbacks, parent scope etc. In your controller you would just call the dialog like this:
function($scope, Dialog) {
Dialog({scope: $scope, templateUrl: 'path/to/modal/body', buttons: {
'agree': agreeCallback,
'disagree': disagreeCallback
}, title: 'Modal title'});
}
Or you could go one step further and create TermsModalService that would abstract details like template, buttons, callbacks, title, etc and use the underlying Modal service to show the actual dialog. The Terms modal would be easily usable between all controllers with one-liner: TermsDialogService.show();
I'm using angular-ui bootstrap to show modal windows. I'd like to turn this into a directive that would let me pull content from the server and display it in a modal or popover…
For example: <a a-infobox="modal" href="#/content/one">A link</a> should get the content from the href and pull it into a modal window.
I pulled together a plunkr: http://plnkr.co/edit/cwtTHjMsW0knlsq2NNtg?p=preview. The first link has the a-infobox attribute. When I click on it no dialog shows up. In the console you can see that it was called.
When I click on the second link which is called from a controller, it opens the second dialog. Then when I click the button on that modal, it disappears and the dialog from the first click is right behind it.
I'm just starting to dig into directives and am sure I'm missing something fundamental.
Thanks in advance.
I found a solution...it appears that the modal needs to be applied so angular will process it on the next digest.
A simple line: scope.$apply($rootScope.dlg); is all it took.
The plunker was updated accordingly.