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);
Related
I am trying to perform the following
Call a modal on a button click from say page 1.
Show the data passed from page 1 as content in the modal.
Come back to the page 1 on clicking the close button on the modal.
I wish to use a react modal to serve this purpose.
You can look any react model library
https://www.npmjs.com/package/react-modal
it has the example also, please check it
I am new to angular and have a situation where we have nested views and one of the view has link(s) to open a modal
But the issue is that when the modal opens up one of the views in the background is getting reset..dont know why and how can we resolve it?
[Plnkr][1] :
http://embed.plnkr.co/dliyNd5EaobgkFNA8Xxg/
will really appriciate the help..
so the issue if if we open child1 on the page and then click on open modal it actually clears the child 1 view
You have defined a home.modal1 state, and trying to redirect to it by ui-sref in view2.html. As it didn't have a template to show, so you will see a blank page which looks like the child views are resetted.
I have add a template for home.modal1 state with your plunker to help you confirm that.
You can change the ui-sref to ng-click and define a function in view2.html controller which calls the $modal.open to open the modal.
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 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'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.