AngularsJS How to pass strings to directive?

Question

I have been trying to pass string values to directive but it seems to only accepts integers or floats.

This is the code:

app.directive('oodaBar', function(){
    return {
        restrict: 'EA',
        scope: {
            total: '=total',
            value: '=value',
            width: '=width',
            tcolor: '=tcolor',
            vcolor: '=vcolor'
        },
        templateUrl: 'partials/ooda-bar.html'
    };

ooda-bar.html:

<svg width="{{width + 25}}" height="50">
<rect x="25" width="{{width}}" height="19" fill="#{{tcolor}}"></rect>
<rect x="25" width="{{width * (value / total)}}" height="19" fill="#{{vcolor}}"></rect>
<line x1="{{width + 25}}" y1="19" x2="{{width + 25}}" y2="38" stroke="#333" />
<line x1="{{width * (value / total) + 25}}" y1="19" x2="{{width * (value / total) + 25}}" y2="38" stroke="#333" />
<text x="{{width * (value / total) - 5 + 25}}" y="40" fill="#333" style="direction:rtl">{{value}}</text>
<text x="{{width - 5 + 25}}" y="40" fill="#333" style="direction:rtl">{{total}}</text>
</svg>

And I added this to display it:

<ooda-bar width="500" total="100" value="60" tcolor="333" vcolor="ffc000"></ooda-bar>

the problem is that I got this in browser:

<svg width="525" height="50">
<rect x="25" width="500" height="19" fill="#333"></rect>
<rect x="25" width="300" height="19" fill=""></rect>
<line x1="525" y1="19" x2="525" y2="38" stroke="#333"></line>
<line x1="325" y1="19" x2="325" y2="38" stroke="#333"></line>
<text x="320" y="40" fill="#333" style="direction:rtl">60</text>
<text x="520" y="40" fill="#333" style="direction:rtl">100</text>
</svg>

As you can see the second rect has no value in "fill".

How can I pass the string value that contains color code ?

using wrong operator in directive scope object .. try using @ not =. There is no 2 way binding if you are hard coding values in attributes — charlietfl
– charlietfl, Commented Sep 17, 2015 at 13:22
Yeah should use @ for 1 way binding. = is used for two way binding. — Imab Asghar
– Imab Asghar, Commented Sep 17, 2015 at 13:24
In either case, the value passed into the directive should be an evaluate-able expression. 333 works because it evaluates to an integer. But FFc000 does not evaluate as a string, it tries to evaluate as a variable name, which does not exist in the namespace so the result is undefined. If you want to bind to a string literal, put the quoted string literal into the attribute as shown in the down-voted answer below. — JC Ford
– JC Ford, Commented Sep 17, 2015 at 13:32

Diana R · Accepted Answer · 2020-03-03 09:54:33Z

5

Usually strings have to be enclosed in single quotes:

<ooda-bar width="500" total="100" value="60" tcolor="333" vcolor="'ffc000'"></ooda-bar>

Update to add explanation based on the comment from @ste2425:

"Hard coded strings should be enclosed in a second pair of quotes, double or not, because angular will think your referring to a scope variable otherwise and try to perform binding on it. I should also mention that it is really bad practice to hard-code values in your view"

edited Mar 3, 2020 at 9:54

answered Sep 17, 2015 at 13:19

Diana R

1,1741 gold badge9 silver badges24 bronze badges

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

2 Comments

JC Ford Over a year ago

Why was this downvoted? It is the correct solution, even if it didn't explain why.

ste2425 Over a year ago

This shouldn't have been down-voted it answered the question. Hard coded strings should be enclosed in a second pair of quotes, double or not, because angular will think your referring to a scope variable otherwise and try to perform binding on it. It should also mention however that it is insanely bad practice to put hard-coded values in your view. Kittens and baby elephants will die if you hard-code values in your view.

Burawi · Accepted Answer · 2015-09-17 14:48:12Z

1

I tried two solutions:

1- change "=" by "@" in tcolor and vcolor 2- enclose the value in quotes

Both worked, but according to @ste2425 the seconde solution is bad practice, so choosed the first one.

Thanks to @charlietfl and @Diana R

answered Sep 17, 2015 at 14:48

Burawi

4715 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularsJS How to pass strings to directive?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related