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();
Related
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!
I have a page (P1) and their is 1 button on P1, now I have to open another page in separate window/tab (C1). Now on C1 I have to perform Datasave on button click using the controller and module of P1.
Is there any way so that we can save data from child window using the resources of parent window?
You can use JQuery Dialog box and pass any parameter you want from controller to Modal directive. As the variable is already available in controller, you dont need to pass the data back. Like below -
data ="data"
where $scope.data is available in directive
This guy has a written a nice article on this - http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
Here is a fiddle too http://jsfiddle.net/theparabolink/dnCHA/
$location object seems to be the modal one, not the parent one.
My modal performs an operation over a listing in the parent window, so when user clicks a button into the modal i want to close the modal (already accomplished) and reload the listing (parent) window.
Calling the controller of the parent window would perform a new listing so would be also nice.
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'm making a web app with AngularJS and Angular Bootstrap. I am using a modal to allow the user to select one of many items in a list. The list is rendered with ng-repeat.
On some mobile platforms, there is quite a delay (3-5 seconds) between the user pressing the button that launches the modal and when the modal finally appears. I'm not sure whether the wait is caused by Angular rendering the DOM for that modal before the modal displays, or just by the sheer amount of content in the modal. It could be both. When I remove the ng-repeat list, the modal loads instantaneously.
I need to do one of the following:
(1) Cause Angular to build the DOM after the modal has displayed. It's not ideal, but at least the display of the modal would let the user know that their touch registered and something is happening.
(2) Cause the modal to display more quickly despite the large amount of content.
Any thoughts on how to make either of those happen?
The modal instance has a property rendered which is a promise that is resolved when a modal is rendered. You may delay assigning large dataset to the modal scope until that promise is resolved.
$uibModal.open({
controller: function ($uibModalInstance, $scope, data) {
$uibModalInstance.rendered.then(function () {
$scope.data = data;
});
},
...
});
https://angular-ui.github.io/bootstrap/#/modal
But in my opinion, modals should not be used for large content blocks.