I am new with angularjs and I am trying to add some dynamic content to the DOM.
What I want to do is a little bit like twitter for example.
I have a table with different rows and if the user click on a row, there is some details ajax loaded just ender the row.
I have a template for the row details (which I want to display (and compile) just ender the clicked row.
As I don't realy understand how to trigger a directive with click, I have tried to do it from a controller function (with ng-click on the row) but I can't compile (I only have the template displaying).
If anyone has an idea how to do it (and best, a way to do it with directive as it seems to be the right way to do it).
Thanks
Since it is not clear how complicated your template is that you want to add, you may not need a directive — ng-repeat on the <tr> element may be enough. On the AngularJS home page, the "Wire up a Backend" demo, tab list.html shows how to dynamically add rows to a table using ng-repeat, with data that was retrieved via the query() method. Is this sufficient for your needs?
Related
I am trying to use the Angular UI Bootstrap Typeahead directive in a few tables. These tables could have 0 to thousands of entries in them and when I attach the typeahead directive to each <input> in my table rows, it creates a DOM element for each one!
If I inspect the DOM after the page loads, I can see hundreds of <!-- ngIf: isOpen() --> on the body of my HTML. The thing is, all of these typeaheads use the same source list to supply the typeahead with it's data, so techincally I should only need 1 typeahead element that is just re-used on each input in my tables.
Currently, I do not see a configuration attribute on the typeahead documentation that allows us to create 1 shared typeahead element. Is there any way to easily get this functionality to work without altering the angular bootstrap javascript myself or without building the typeahead directive from scratch?
EDIT
To make things even worst, I have pagination on my tables and if you change between "pages" of the tables, the directive re-creates more <!-- ngIf: isOpen() --> for every new instance of that page. Therefore, if the table starts out with 100 items per page out of 10 pages, if the user clicks on each page of the pagination at a time, they will end up with 1000 <!-- ngIf: isOpen() --> on the page.
Implement some kind of view/edit state transition on the cell that contains the typeahead directive.
Use something like an ng-if="row.isEditing" on the input with the typeahead directive. As-is, your table is going to create a DOM element for every row unless you tell it not to. When you click into the cell to edit, then change the edit mode state, and the DOM element for the typeahead will be loaded on-demand.
This plunker is (somewhat) like the approach I have in mind, but it implements a whole edit row instead: http://plnkr.co/edit/ivJQ0C
Notice in that example that the DOM element for the edit row does not exist until the condition of the ng-if is met.
Am using angular in this simple search results page and instead of adding jquery masonry for layout and deal with timing issues I decided to give this directive a try since it plays nicely with the ng-repeat.
Unfortunately when I have a large dataset and the ng-repeat takes a second or two, the page gets all screw up and all items render on top of each other. Someone claimed that it has something to do with the last element in the ng-repeat not being loaded by the time the layout is created through the plugin.
Someone else recommended a timeout to create a delay, this option works but the user can see the layout being built, which is not the best solution.
Anyone out there that has use this directive to create a masonry layout with a large dataset?
I'm stuck with Angular. I have a directive that shows a list and when the user hovers over an item, I want to show a preview of the item, with the preview being given by the directive user.
Some tricks though... I want the user to be able to filter the list using an input [which is easy on it's own] and there is some basic styling surrounding the list that I would like the directive to handle, like adding the checkboxes that well be watched to create the model for the directive.
I want the directive user to simply be able to write:
<preview-list list='unfilteredlist'>
<div>
<h1><blink>{{title}}</blink></h1>
<h2><marquee>{{html extrodinaire}}</marquee></h2>
</div>
</preview-list>
I tried using ng-transclude, but it uses a sibling scope and I've been looking for work arounds and I can't find any. The only ones I found involved writing the entire template in javascript, which honestly I can't believe people think that's an acceptable solution.
Any solutions, or is this actually completely impossible in Angular?
As i see it you have two options :
Create a preview box for each member in your list and toggle visibility on hover. This is great if you have only a few values and the preview box is heavy.
Create a transcluded directive in which - the main scope will hold the list and the currently hover element. The sibling scope will hold the preview container. Once the selected value changes the preview box will update (according to your bindings) and only thing left to do is position it.
transclude is hard at first but it pays off.
Hope this helps.
I'm in need of some pointers in my landingPage-builder project. (i'm currently stuck!).
The main issue is as follows:
Each element in the template (like the h1 and the paragraph) has attached a directive. What I need to get the directive to do is: create a template of HTML with some other directives attached like ng-click, ng-options etc, keep the bindings to the model intact (currently far away from working), update the model when changed.
I'm not trying to append to, or replace the element the directive is on, but make a html-template and inserting it into the DOM (almost like another view) so that the model on the left can be updated from the "settings" box on the right.
The project can be viewed here: http://193.107.29.196/~stian123/landingPageV3/app/#/pagebuilder/2
You may need Allow-Control-Allow-Origin for Chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
I'm a bit confused about $compile and doesn't really know when I need to use this part of the directives api.
Any suggestions?
Thank you!
If I understood your question correctly, you want to dynamically create templates, some of which have Angular attributes in them, then attach them to the DOM.
First, to (hopefully) answer your question, about when to call $compile:
Whenever you load in HTML from outside Angular's template system (like trying to set $(element).html(myHtmlString)), you need to let Angular compile it before you attach it to the DOM. In other words:
elem.append($compile(yourHTMLString)(scope));
This lets Angular traverse the DOM and parse any directives and bindings and attach them to the provided scope. If you don't $compile, Angular has no idea about those intended bindings at all, the HTML is never read by Angular.
Second, I don't know how flexible you want your templates to be, but if they're relatively fixed, but with some fixed customizable options (text, color, font-size etc), you might be better off creating a directive for each 'view', with the view options bound to the scope of the directive. Then you can just change the fields on the scope of the directive in the panel on the right side, and the view will update directly. You wouldn't even have to use $compile in this case.
If you want the user to be able to manually add the template HTML code, you will have to compile the HTML as described above.
I have an angular multi-step form in a modal window. It has a few different views and works great but at the end of it I just want to display a tiny snippet of HTML along the lines of 'Thank you, we will be in touch shortly'
However, I thought about creating a view for this with a partial but it seems incredibly over-engineered for what it is. Is there any way in angular of just replacing the view with that sentence without creating a whole new view? This will be called from a function in the final controller
Use ng-show and ng-hide to do this in your view. Suppose if your view is no longer needed you can hide it and show the Thank you snippet at its place by using ng-show.
ng-switch is what you are looking for.
From the docs:
"The directive itself works similar to ngInclude, however, instead of
downloading template code (or loading it from the template cache),
ngSwitch simply choses one of the nested elements and makes it visible
based on which element matches the value obtained from the evaluated
expression."
http://docs.angularjs.org/api/ng.directive:ngSwitch
you can this code, if you have one area of content
<ng-view></ng-view>
good method you can find in LINK