I made a custom attr directive and i will use it in siblings elements like:
<div>
<div [customAttrDirective]="'value'">1</div>
<div [customAttrDirective]="'value'">2</div>
<div [customAttrDirective]="'value'">3</div>
<div [customAttrDirective]="'value'">4</div>
</div>
I olso made a service that control all of my directives. Inside this it I want to know the count of my directives customAttrDirective.
PS: I can't do it by searching by class name(because i add classes inside the directive) and i can't do it by searching by attribute (directive name) because angular change.
Edit: replaced wrong sintax customAttrDirective="'value'" to [customAttrDirective]="'value'"
Many thanks.
Assuming your custom attribute directive's class name is CustomAttrDirective, in the component that you are using your custom directives, add this:
#ViewChildren(CustomAttrDirective) dirs: QueryList<CustomAttrDirective>
Then in life circle ngAfterViewInit, get the length of variable dirs.
Related
Is it possible to get the id of from the route.queryparams?
I have done this in vue js
<div id="{{this.$route.query.data}}" class="col-md-12>{{data}}</div>
Yes, you can use the v-bind directive, or : for short, also no mustache for attributes in Vue 2:
<div :id="this.$route.query.data" class="col-md-12>{{data}}</div>
In Angular1 you could directly insert the HTML into the index.html or index.php like this:
<div ng-controller="pricingController">
{{price}} - Total Cost
</div>
In Angular2 you have to use a component which forces you to use a TemplateURL in the component.
I want to do something more similar to Angular 1's format.
Something like this directly in the HTML:
<div ngComponent="pricing-component">
{{price}} - Total Price
</div>
Rather than this:
<pricing-component></pricing-component>
If you want to use an attribute you can use the attribute selector, and a directive. A directive is a component without a template. Or better said, a component is a directive with a template:
<div pricing>
{{price}} - Total Price
</div>
And your Pricing will have this selector in the directive annotation:
#Directive({
selector : '[pricing]'
})
export class PricingDirective {}
I have a template that contains the following fragment:
<spark class="col-12" value="80"></spark>
I also have a variable accessible to this template as {{ratio}} such that if I change my fragment to:
<spark class="col-12" value="80"></spark>
Ratio: {{ratio}}
the correct ratio will be displayed on a page.
This is what does not work:
<spark class="col-12" value="{{ratio}}"></spark>
which results in "{{ratio}}" string being displayed.
Any ideas ?
You should be using the built-in directives for adding attribute values from the scope, for example ng-src, ng-style, ng-href, so on.
Documentation for the built-in directives
Will ng-attr work for you? ng-attr-value="{{ratio}}"
https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
I'm using angular grid -
let's say i have a scope object as follows:
$scope.test = 3
If I want to dynamically set an html id, I would do something like this:
<div id="{{test}}"></div>
Checking the DOM, I see the following:
<div id="3"></div>
For my angular grid, I want to do something like this:
<div ag-grid="{{test}}"></div>
Checking the DOM I literally get:
<div ag-grid="{{test}}"></div>
Is there a way around this?
You can use ngAttr and do this like the following:
ng-attr-ag_grid="{{test}}"
Please check if this helps
Use
<div ag-grid="test"></div>
Check following link and check first example html file forag-grid tag with binding variable
Note: Based on example test should be object not string or other type.
Is {{ }} necessary?
You can try:
ag-grid="test"
I have created a dropdown list like feature using angualrjs directive, The directive is working somewhat but not in correct way I expected.
Following are the issues which I am facing.
The drop-down list alignment is correct for static but not for dynamic
I am not able to select any of the option list since getValue function which I have defined in the parent directive is not been invoked from the trancluded directive
Can anyone please tell me some solution for this
My code is as given below
PLUNKER
<div ng-controller="MainCtrl">
Static
<grant-parent ng-model="grand1">
<parent label="Parent1" value="12">
<child value="56" label="Child1">Child1</child>
<child value="57" label="Child2">Child2</child>
</parent>
<parent label="Parent1" value="13">
<child value="58" label="Child3">Child3</child>
<child value="59" label="Child4">Child4</child>
</parent>
</grant-parent>
Dynamic
<grant-parent ng-model="grand2">
<parent ng-repeat="parent in data" label="{{parent.parentName}}" value="{{parent.parentId}}">
<child ng-repeat="child in parent.childrens" label="{{child.name}}" value="{{child.id}}">{{child.name}}</child>
</parent>
</grant-parent>
</div>
Transclusion and ng-repeat have caused me headaches, and I thought it would be challenging, but the solution proves quite simple:
Remove the DOM manipulation from your link function and do the transclusion in the template!
I.e. <div ng-transclude></div> in the template of the parent and remove this line: elm.find('div').replaceWith(transclude()).
Forked plunk: http://plnkr.co/edit/UGp6D29yxnu0uJwD1BM2?p=preview
Now the markup comes out a bit different, the wrapper <div> still exists. Although there seems to be no visual difference, this may not be what you want. I do not think there is a sane way to get around this, so I would suggest altering the layout a bit: Why don't you place the children inside the parent <li>, e.g. as:
<li>
<b><a href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a></b>
<div ng-transclude></div><!-- the div is now inside the li -->
</li>
This works in the plunker, but the markup is still invalid (<li> within <div>).
The best solution is to wrap the children in their own <ul>, i.e.:
<li>
<b><a href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a></b>
<ul ng-transclude></ul><!-- The div is replaced with ul -->
</li>
This does not work in the plunk as it is, but should work with a little CSS tweaking.
Concerning getValue You have gotten wrong how isolated scopes and transclusion work. The grandParent directive defines the getValue method in its isolated scope. The transcluded things (the parent and child directives) get the outer scope, i.e. the scope of the MainCtrl. A solution is to move getValue() to the MainCtrl.
A better solution would be to pass a callback to the descendants of the grandparent, e.g. as scope: { assignValue: '&' }. But this solution cannot be implemented for the code in its current form because the grandparent does not directly include its children, so it cannot pass arguments to them.
The final solution - copied from the comments: move getValue to the controller of grandParent, have the parent and children require the grandparent and call that function. See http://plnkr.co/edit/pS9SspLaoPlqoWMYr8I0?p=preview