I wanted to create sortable tabs using uiSortable directive (https://github.com/angular-ui/ui-sortable) and tabs from AngularUI bootstrap (http://angular-ui.github.io/bootstrap/). Important thing for me is an ability to sort elements in model, by using ng-model. So, I added ui-sortable and ng-model="someArray" on element. It doesn't work that way, because tabset is being replaced with structure like that:
<div>
<ul>
<li>tab 1 header</li>
<li>tab 2 header</li>
<li>tab 3 header</li>
</ul>
<div class="tab-content"> tabs content </div>
</div>
and in effect, sortable is applied to outer div so I can grab ul and .tab-content when in fact I wanted to sort those li elements.
My first try on solving that problem was creating uiSortableTabs directive with compile function that adds ui-sortable attribute to ul (using just attr()). Good thing is that now tabs are sortable. Bad thing is that now sortable is not aware of model. I tried invoking .attr('ng-model',attrs.ngModel) on that ul together with adding that ui-sortable. Now sortable see the model, but it's undefined.
Does anyone know how to make sortable tabs with updatable model or how to correctly add directive to an element, together with ngModel using compile function in other directive?
I was working with a similar one, my solution is to use jQuery ui sortable directly and change the data model by hooking the start and stop event.
Related
The situation is I have an HTML structure somewhat similar to this:
<div class="dynamicDirectiveGoesHere">
<p>{{SomeExpressionThatDiffers}}</p>
</div>
I need to display a bootstrap http://angular-ui.github.io/bootstrap/ popover when the text within p has an ellipsis. That's why I'm adding the popover attribute dynamically. I can get the popover to display using $compile, but the problem is the text within {{ }} goes away. I can't use the template trick since I don't really know what the template will be since the popover will happen on several different child tags that have different templates. So that's why there is the need to only $compile what's in div, and not in the child element (p tag). Is this possible with angular?
You can add the property terminal to your directive and adjust the priority to fit your needs.
terminal: true prevents other directives from getting instantiated and is used by for example the ng-repeat and ng-if directive.
You can read more here https://docs.angularjs.org/api/ng/service/$compile (scroll down to terminal).
I am trying to create Master Details in table
here is the plnkr Code
but as i start putting filter for the ng-repeat the dom rendering behaves weird
click the + button to expand row and the search the textbox
am i doing some thing wrong
My guess is that ng-repeat-end and ng-if do not play well together. If you place the ng-if in the <p> element, your example is working. Of course this has the (undesired?) effect of allways including the details row in the DOM, event though it will be hidden.
I have a directive that turns a collection of items into a variable number of columns. The template for the directive uses ng-repeat to repeat the columns, and ng-class to apply a css class that turns the div into a column. The problem is angular throws errors when using the ng-class on same line as ng-repeat. Removing it fixes the issue, but the directive doesnt work properly. Now, this same functionality works fine in normal angular views, but not when used in a directive template.
Here is a plunkr i put together to demonstrate:
http://plnkr.co/edit/MKAbQR?p=preview
I have a list of DIVs that are generated by ng-repeat.
I need to apply an ng-class to those that're selected. To find out if the div is selected, I call to a model function ( not ng-model, just standard conceptual model ).
<div class="default" ng-class="{selected : myModel.isSelected({{item.id}})}" ng-repeat="item in items">
<!--Div content-->
</div>
This doesn't work, and none of the divs get the selected class.
However, when I call the model function from the inspector (myModel.isSelected(id)) for a specific id constant, I get "true".
Any ideas?
Thanks!
I am using jPanelMenu in a ToDo application for the left side menu. I have created a directive to apply the jPanelMenu to the appropriate elements.
Everything is working as expected except there is a nested ng-repeat with a nested ng-click inside of the element that gets reassigned with jPanelMenu.
<jpmenu>
<ul class="unstyled">
<li ng-repeat="category in categories">
{{ category }}
</li>
</ul>
</jpmenu>
The ng-click event is not firing in the created jpanel menu.
Notes:
jPanelMenu coppies the jpmenu element and applies it's styles to it, not using the original dom elements
The original DOM elements still exist and they are "display:none;"
the class ng-scope is missing from the recreated jpanel menu element
The ng-click element fires properly on the original DOM element if I unhide it and click it, but the recreated elements do NOT fire at all.
I've added a timeout to the directive to delay the jpanel menu recreation (to wait for angular to finish it's other directives first) but that didn't help
Here is a jsfiddle example of exactly what's going on (THIS FIDDLE DOES NOT RUN IN CHROME BECAUSE OF CROSS SITE SECURITY): http://jsfiddle.net/47PXj/
If you click the unhidden original menu items in the jsfiddle you'll see the text updating, but if you click the menu items in the left menu they do not work.
You forgot to bootstrap your app. Try this:
<body ng-app="myApp">