Binding array to directive variable in AngularJS

Question

I'm trying to get an array into a template so I can use the individuals values thereof. My problem is that the attribute turns into a string once inside my template so it's no longer accessible as {{var[0]}} and that will instead return the first character of the "string", usually "["

Here is a simplified setup of the data:

"varForward": ["100", "1"],
"varBack": ["1", "100"]

Here is a simplified portion of the HTML file that interacts with that data:

<my-customer-vars value="{{varForward}}">
    </address-numbers>
<my-customer-vars value="{{varBack}}">
    </address-numbers>

and lastly here is a portion that is SUPPOSED to replace the custom tag with my own stuff:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "@"
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

So here I am, if I try using value[0] I get [ If I try to get value[1] I get " and so on. Is there any help on using arrays inside the template of a directive?

score 46 · Accepted Answer · edited Apr 29 '16 at 18:58

46

You need to change the "@" into "=" and to pass in the array without the {{ }}

like this:

<my-customer-vars value="varForward">
    </my-customer-vars>
<my-customer-vars value="varBack">
    </my-customer-vars>

directive:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

This is happening because every expression inside a directuve attribute defined by a @ gets evaluated as only as a string, and in the other way it gets evaluated as binding expression. (with 2 way binding, so be careful).

edited Apr 29 '16 at 18:58

Bruno Toffolo

1,504
19
24

answered Feb 04 '13 at 21:20

Shai Reznik - HiRez.io

8,748
2
33
33

1

Thanks, that works perfect! I'm not completely comfortable with the scope variables, but that helped clear up a lot of questions I had, including how to use them. – Organiccat Feb 04 '13 at 21:30
Now that we're passing models instead of values, I suggest `model="varForward"` and then `scope: { model: '=' }`. – Mark Rajcok Feb 04 '13 at 21:59
@ShaiRez Is this the best way to take the array and put it in a template? I'm fairly new wondering if there are alternatives. – Michael J. Calkins Apr 01 '13 at 16:10
does this work as of 1.08 because it doesn't seem to be for me – km6zla Jan 07 '14 at 20:30
Yep, it has not changed – Shai Reznik - HiRez.io Jan 10 '14 at 16:14

score 16 · Answer 2 · answered Aug 27 '13 at 23:44

If you would prefer not creating an isolate scope in the directive (such as when creating custom validation directives) you could pass the array as:

<my-customer-vars model="varForward">

And then read the value in the linking function of the directive as:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        link: function (scope, elm, attrs, ctrl) {
            var myVars = scope[attrs.model]; // <--- took a time to figure out
            console.log(myVars);
        }
    }
});

@greg this reply is from a long time ago, I suppose about the time of Angular 1.1 or 1.2. Maybe it doesn't work anymore in newer versions. I don't use Angular anymore. — Danita, Dec 29 '14 at 17:08

score 6 · Answer 3 · edited Dec 29 '14 at 13:17

6

Just to add to the reply of Danita, you will have to use $eval for fetching this scope variable:

Just change

var myVars = scope[attrs.model];

to

var myVars = scope.$eval(attrs.model);

edited Dec 29 '14 at 13:17

bish

3,381
9
48
69

answered Dec 29 '14 at 12:36

Sohan Soni

1,207
21
35

1

Thanks. I wish this was better explained in the documentation. – taco Jun 11 '15 at 21:19

score 0 · Answer 4 · answered Sep 07 '16 at 17:55

Just another perspective - if the problem is just managing an array of strings in angular application I would use one of the following (or any similar):

Unless you are practicing creating your own angular directives (then just ignore my answer)

Binding array to directive variable in AngularJS

4 Answers4

Linked