Dynamic variable name directive attribute

Question

I have a my-edit directive that has a value attribute expecting a scope variable to bind to.

<my-edit value="myVar"></my-edit>

is there any way to do something like this:

<my-edit value="{{varName}}"></my-edit>

where varName = "myVar"

I want to nest this directive in "my-listbox" directive that has a "text-field" attribute

<my-listbox ng-model="myList" text-field="itemProp"></my-listbox>

So I was trying use a template like:

<div>
    <ul>
        <li ng-repeat="item in items">
            <my-edit value="item.{{textField}}"></my-edit>          
        </li>
    </ul>
</div>

But obviously it doesn't work

I guess using a text binding is also not the solution.

Is a dynamic generated template for "my-listbox" the way to go here?

I tried that in the compile function but the didn't work that well because of the nested neRepeat directive. Should it by done using $compile in link function?

Thanks

If I understand; isn't this the answer: value="item.textField" — JeffryHouser
– JeffryHouser, Commented Mar 10, 2014 at 19:25
item is an object in the items collection binded to the parent directive. textField is a string attribute specifying the item object property name to be used(shown in thes case) be the directive. item doesn't have a textField property — RuiFortes
– RuiFortes, Commented Mar 10, 2014 at 19:30
In that case; I don't understand what you're asking. Perhaps you should put together a Plunker sample. — JeffryHouser
– JeffryHouser, Commented Mar 10, 2014 at 20:10

hassassin · Accepted Answer · 2014-03-10 19:44:27Z

6

This is something pretty cool about angular, it evaluated the string that you pass to the directive. This means that you can actually just do value="item[textField]" and that will work.

For instance if you had a controller with data like this:

$scope.data = {
    test: 'test_val',
    other: 'other_val'
};
$scope.val = 'test';

You could just pass it like this to your directive:

<directive value="data[val]"></directive>

That is set up like this:

scope: {
    value: '='
},

And the isolate scope will have scope.value = 'test_val' and will update to 'other_val' just by changing the original controller val to 'other'

I made a fiddle where this is set up for you to play with.

Hope this helps!

answered Mar 10, 2014 at 19:44

hassassin

5,0641 gold badge32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RuiFortes Over a year ago

Of course...should have known better. Thanks hassassin. Can I delete the post? It's a little embarrassing :)

hassassin Over a year ago

If you really want to I can't stop you, although I do think that many, many other people will eventually encounter this same issue.

dube Over a year ago

What would be really interesting is how to access a dynamically named variable on root level. The array notation is useless there :)

hassassin Over a year ago

Sort of a different problem, since the directive is evaluating on it's own scope and I suppose are looking for the outer controller to have like $scope.test and $scope.other directly. But yeah sounds fun. If you have a use case, you should ask it as a question :)

Collectives™ on Stack Overflow

Dynamic variable name directive attribute

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related