angularjs binding to an attribute

Question

I am trying to load directive inside another directive dynamically, so I am trying to use ng-repeat for the below, where {{item.directiveName}} is the inner directive name.

<card ng-repeat="item in items" {{item.directiveName}} title="{{item.title}}">

The problem is that the {{item.directiveName}} is not evaluated, it stays as it is. I think because it is not a value of an attribute, it is an attribute.

Is there any way for this expression to be evaluated or this is not supported by angularjs?

Angular only will parse item.directivename as an attribute's value, but not as an attribute. You should write a directive to print and manage the whole instead. — David Vartanian, Oct 06 '15 at 14:59
`{{item.directiveName}}` angular only compile once, that syntax won't work. — YOU, Oct 06 '15 at 15:08
This should help you: [Add directives from directive in AngularJS](http://stackoverflow.com/questions/19224028/add-directives-from-directive-in-angularjs) — fracz, Oct 06 '15 at 21:17

score 1 · Answer 1 · answered Oct 06 '15 at 14:43

1

This should do it, depending on the card directive.

<div ng-repeat="item in items">
<card  {{item.directiveName}} title="{{item.title}}"> </card>
</div>

answered Oct 06 '15 at 14:43

Mike Feltman

5,160
1
17
38

Where's the card directive coming from? – Mike Feltman Oct 06 '15 at 14:47
it is a custom directive that I developed. Forget about the card directive, you can put a div instead the card directive, and you will face the same problem. – Ghyath Serhal Oct 06 '15 at 14:48
Is card your directive as well? Anyways, I think this approach would not work because you assign value after the compile stage. For starters, if card is your directive, try adding a breakpoint in its link function and check the attributes and change your html to: – Meir Oct 06 '15 at 14:52
1

So you're trying to dynamically load a directive in a directive basically? I don't think Angular will do that out of the box. This codepen: http://jsfiddle.net/ftfish/KyEr3/ should get you pretty close. – Mike Feltman Oct 06 '15 at 14:52
yeah, that is right. I am trying to load a directive inside another directive dynamically. – Ghyath Serhal Oct 06 '15 at 15:01

score 0 · Answer 2 · answered Oct 06 '15 at 14:49

0

try to assign it to an attribute

<card ng-repeat="item in items" data="{{item.directiveName}}" title="{{item.title}}">

    <card ng-repeat="item in items" myAttr="{{item.directiveName}}" title="{{item.title}}">

answered Oct 06 '15 at 14:49

Isaac

218
1
15

If I assign it to to an attribute, it will work, but I do not want to do it, because this is the name of another directive that should be executed. – Ghyath Serhal Oct 06 '15 at 14:50

angularjs binding to an attribute

2 Answers2