I needed an circle progress indicator within cells of a table, which is rendered through an ng-repeat. So, I used an angular plugin, Which is an basically angular directive. When i use this directive within an ng-repeated div, those directive aren't compiling correctly. And, the directive is working correct, if there is no ng-repeat. Click here to view an plunker, demonstrating above issue..
Related
I have custom directive that is using controllerAs and binding an external controller. The controller function is to render the list in the html under an input box. Earlier this controller was with in the directive, it was not bound to directive and every thing was working fine and ng-reapeat was showing the list and list was tracked by $index so not duplicates were shown. But since the time I have moved the controller outside directive the track by $index have stopped working it showing me the duplicates in list.
What's missing ? Do I need to define index in controller or use it as controller.$index?
I have two directives that should both use isolate scopes, <outer-box> and <flag>. When I click on the <flag> directive, I want to change the background color of the other directive. Before importing my code into JSFiddle, I also had it working so that by default, a placeholder image appears in the flag directive, but once you click on that image, the country flag appears instead.
Can someone help with the styling a separate directive on ng-click?
Here's my code: https://jsfiddle.net/nLduw6xw/
(My countries data isn't working in JSFiddle for some reason)
You can do it with requiring one directive from another.
In this example you can require outer-box to be a parent of flag.
With this you have the access to required directive controller ( 4th parameter in link function), so you can call a method to set class on element.
Working JSFiddle : https://jsfiddle.net/2atnxhgy/
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 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 an application that contains a div with content in it. When I click a button jQuery adds a AngularJs directive to the div. After adding the directive i call scope.$apply(), but this doesn't seem to inform angular about the new directive on the div. Can someone explain to me how I can inform AngularJs about the new directive added with jQuery?
You shouldn't be adding directives to your markup with JQuery. Use Angular for that whenever possible.
That said, if you have to add directives via straight DOM manipulations like that, you'll need to use the $compile provider to compile the element and bind it to a scope before you add it.