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.
Related
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 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 want to attach a directive to a element. The directive will be responsible for the following:
1. Attach a click event to the element
2. Upon click.. show a drop-down
In order to perform the first activity I have added directive called "sortDirective" to my element below:
<span class="glyphicon glyphicon-arrow-down" style="font-size:0.6em" sort-directive></span>
This is done in the file layout.html
I am facing two issues:
1. the click event is not working
2. the drop-down should be shown only on click event. Right now you will notice that the drop-down (blue in color) is being shown at all the times.
I believe i am missing something here since my directive sort-directive is falling within another directive custom-table.
Am I thinking in the right direction or am I totally off ?
Plnkr Here
I wouldn't call the click event with the directive. My advice would be just to put ng-click to the span that you want to call the function from (and move the function to the controller).
You might want to look at this thread:
trigger click event from angularjs directive
Also a quick css tip - add these rules
cursor:pointer;
padding:0 0 0 5px;
to the class .header-cells.
Finally, don't you think that the arrow is too small to click it? Try binding the click event to the whole container.
i finally managed to lay this out. Those interested in seeing how it is done ..here is a plnkr
http://plnkr.co/edit/TG6aCEu2TgPq28Jcj0nM?p=info
just click on any of the headers (in orange) and you should see the results.
I am trying to get a ng-click event to fire correctly when integrating the Angular Kendo UI.
The following Plunker shows a working example, click the button click me and a modal window appears, however if I add the kendo-grid attribute to line 18 of index.html then the pop up does not work. e.g. changing:-
<table>
to:
<table kendo-grid>
Then the modal popup does not work. I suspect that when the grid is rendered then angular loses the binding. Not sure how to fix it. Can anyone help?
The problem is the angularjs-kendo labs master file does not support command binding and a couple of issues have been raised.
Basically you need to take the javascript from the compile-kendo-grid-rows
See working plunker.