I wanted uibTooltip directive instead of native title HTML atribute. Then, I got a directive that provides an automatic permutation of attributes before compiling.
The troubles are in ngRepeat directives if tag with affected attributes is inside.
You can see it here (a JSFiddle testing example).
because this directive use terminal and when you use button inside <li>
<li><button type="button" ng-repeat="btn in vm.buttons" class="btn btn-default" title="Add" ng-click="vm.add()"><span class="glyphicon glyphicon-plus"></span></button></li>
this link is well explained about terminal and priority.
Here is a solution! It is success if we compile inside postLink function.
Related
I'm building a large input form in angular. To make the application user friendly I have broken the form down into many different sections. I need each section to reside within a different group of an accordion. Each section needs to have validation and a user cannot progress until the required field validation has been satisfied.
In the main page of the app I have added the markup for the accordion. Each section within the accordion is a custom directive. The directive contains the markup for each group (The input form and validation) and it also contains the code to connect to the relevant services to persist state within a db.
Sample code
<uib-accordion close-others="true">
<uib-accordion-group heading="Person Details" is-open="heading1.isOpen">
<div person-details></div>
<button class="btn btn-default btn-sm pull-right" ng-click="heading2.isOpen = !heading2.isOpen">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
<uib-accordion-group heading="Address Details" is-open="heading2.isOpen">
<div address-details></div>
<button class="btn btn-default btn-sm pull-right">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
</uib-accordion>
The difficulty is how to manage what accordion group is open at any time. In the example code above I have a next button to open the next accordion group. However this button needs to reside with the directives themselves in order to manage validation. The problem with this is that the directives then need to know how to control the accordion in order to change the active accordion group - bubble up somehow.
Does anybody have any thoughts on this please? If you think I am going about this is the wrong way please let me know.
Thanks
You need to use a scope variable in your directive(s) that has a two way binding to heading1.isOpen for example. That way the directive will be able to modify the is-open state of its parent directive.
Just search angular docs for directives and isolated scope variables.
I'm currently trying to create a directive that has two transcluded sections and have been unsuccessful so far. Now I discovered that the tab directive of Angular UI Bootstrap does exactly that! Unfortunately, the angular trickery that they pull off in their source code is apparently too advanced for my understanding.
In the examples, they have the following code:
<tabset>
<tab select="alertMe()">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
This is exactly what I need. Can someone explain to me the steps that I need to take, so that the <tab-heading> content is transcluded in one spot, and the other stuff in another?
Things I don't understand in the sources:
There is no directive tabHeading only a tabHeadingTransclude. How is the <tab-heading> element found, then? I also don't see a query for such elements anywhere.
I also don't understand the two transclude-directives tabContentTransclude and tabHeadingTransclude.
You ALMOST had it when you were looking at the tabHeadingTransclude directive. A few lines down is the tabContentTransclude directive. Take a look at the source code here.
Ultimately, the content of either the tab-heading attribute or the <tab-heading> directive is placed inside the {{heading}} expression in the tab template here.
You can glean this from the link function in the tabContentTransclude directive: We set the value of the node (the tab-heading attribute or the <tab-heading> directive) on tab.headingElement which we are watching in the tabHeadingTransclude directive. And when it changes, we update the template.
I'm using angular-ui-bootstrap radio button btn-radio directive together with the angular-translate i18n translate directive
The combination of both directives in the <label> element makes the btn-radio failing.
I created a plunkr to show the btn-radio behaviour
I know there are some issues sharing multiple directives on one dom element and a workaround could be to put the translate directive on a sub span element, or using the translate filter.
So, my question is: is there a way to make these both directives work on the same element?
My mother tongue is Korean, not English. so, my english is not good.
cause : conflict bootstrap ui and translate library with html element attribute
solution :
not using translate with element attribute
so, remove element translate attribute.
add function to controller for translate language options.
ex)
$scope.translate = function(id)
{
return $translate.instant(id);
};
translate using function
ex)
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">{{translate('BTN_A')}}</label>
demo : http://plnkr.co/edit/TPwTan2dSmMVQbNtxpgg?p=preview
test with blue button.
I just run into the same problem and found a simpler solution without the need to add a function in the controller, but simply using the filter:
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">{{'TRANSLATION.KEY' | translate}}</label>
I am creating a directive in which template I need to use the a scope's variable value as the name of the directive (or alternatively controller) to load.
Say I have a directive widget that has a template called widget.html which looks like:
<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
<div class="navBar">
<div ng-include="widget.type + '-t.html'"></div>
<i class="fa fa-close"></i>
<hr>
</div>
<div ng-include="widget.type + '-f.html'"></div>
</div>
Now widget.type is not getting evaluated in the first line. It works fine for ng-include. Say widget.type's value is weather. The first line should then be interpolated first to look like (doesn't matter if class attribute, widget.type-attr or ng-controller is interpolated)
<div class="widget" weather>
and then compiled to include the weather directive.
How can I get widget.type interpolated in the template?
Not an option is to use ng-include to load the directive. I need to use one common template for the widget and want to add/override/extend the base directive with additonal functionality/Variables.
If this is not the way to achieve that, is there a way to extend a directive the OOP-way?
See the plunkr
You can only place interpolation expressions in text nodes and attribute values. AngularJS evaluates your template by first turning it into DOM and then invoking directive compilation, etc. If you try to place {{...}} instead of attribute name, you'll just end up with messed-up DOM.
If you really need to replace a whole directive based on $scope variable value, you'll need to create a directive for application of other directives and do some heavy lifting with $compile (you'll have to completely re-compile the template each time the value changes). I'd recommend trying to find other designs solving your situation before attempting this.
For adjusting your template based on element attributes, see this answer.
I've just started looking at AngularJs. I was attempting to use a custom directive inside a tr element. I get the following error regarding the switch directive
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
Some sample code is here: http://plnkr.co/edit/YiSFYK5l8mNIlBo6OGFW
Even after I removed the swtich it still doesn't seem to do anything. I changed the repeat direct to be over currentSheetData and removed the swtich entirly but there's no code in the rows.
However in my example I do the same setup inside a div element and it works fine. Would someone explain what I'm doing incorrectly
You need ng-switch directive on the parent node before declaring ng-switch-when on the child node.
Example:
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngSwitch