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?
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 am new to angular, i am having requirement like create dynamically a dropdown with 3 buttons(add,edit,delete) by clicking on a link(create drop down button). We can create a multiple dropdown by clicking on a link Add/delete button should show with dropdown by default. If click on add/delete should display edit and viceversa.
See angularjs directives https://docs.angularjs.org/guide/directive
For dynamic handling of DOM directive is the best
You can also check https://angular-ui.github.io/ for more features make with directive
I am using angular-ui-bootstrap lib in my application. I need to create custom alert with button inside firing modal window.
I have tried two options:
Redefine module angular.module("template/alert/alert.html", []) from ui-bootstrap-tpls.js. Didn't work as I didn't manage to implement a button firing popup window.
Create a custom module based on "template/alert/alert.html" one. Found myself lost in a number of controllers in order to make popup window working.
What is the best approach to achieve that?
If I understood the question, you want to add a button to the alert that will launch a modal.
Plunker Demo
The easiest approach is to simply add your button into the alert template. In the Plunker demo, I copied both the contents of the UI Bootstrap alert and modal demos. Then I copied the alert template and added it to a script tag on the page. Inside the standard alert template I added a button as follows:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
That's an incredibly basic approach, but it should be a good starting point for you. If I were doing this in production, I would add my custom templates to the template cache instead of using script tags on the page itself and I would create a custom directive for my modal button so that I could pass any relevant information from my alert to my modal instance and do away with having to hard code the ng-controller on the button itself.
Just put your alert directive inside the modal template:
http://plnkr.co/edit/XJtZWQOqFVc6svECcat0?p=preview
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 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();