Attribute not evaluating in Angular directive

Question

I am confused as to why the following Angular directive is not working:

JS

angular
    .module("app")
    .directive("symbolImage", function () {
        return {
            restrict: 'AE',
            scope: {
                width: "@",
                height: "@",
                symbol: "@"
            },
            template: "<div>{{width}} {{height}} {{symbol|json}}</div>",
            replace: true
        };
    });

VARIABLES

$scope.current = {prop1:{foo:"bar"}, prop2:{foo2:"bar2"}};
$scope.properties = ["prop1", "prop2"];

HTML

<tr ng-repeat="prop in properties">
    <td>
        <symbol-image height="20" width="20" symbol="current[prop]"/>
    </td>
</tr>

EXPECTED OUTPUT (First Repeat)

20 20 {foo:"bar"}

ACTUAL OUTPUT (First Repeat)

20 20 "current[prop.key]"

It is (was) my understanding the the values passed to scope are evaluated but this does not seem to be the case.

Any/all help is appreciated.

change symbol: "@" to symbol: "="

Alon Eitan
– Alon Eitan

2016-06-14 14:36:39 +00:00
Commented Jun 14, 2016 at 14:36 — Alon Eitan
– Alon Eitan, Commented Jun 14, 2016 at 14:36
Thanks! It worked.

Andre Steyn
– Andre Steyn

2016-06-14 14:39:39 +00:00
Commented Jun 14, 2016 at 14:39 — Andre Steyn
– Andre Steyn, Commented Jun 14, 2016 at 14:39

Deblaton Jean-Philippe · Accepted Answer · 2016-06-14 14:36:37Z

2

You just need to use

    <symbol-image height="20" width="20" symbol="{{current[prop]}}"/>

'@' expects you to give the directive a string. '=' expects you to give the directive an object.

Another way to solve you issue would have been to define your directive like this :

        scope: {
            width: "@",
            height: "@",
            symbol: "="
        },

answered Jun 14, 2016 at 14:36

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

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

Comments

Foker · Accepted Answer · 2016-06-14 14:39:00Z

0

you should declarate your props this way

        scope: {
            width: "@",
            height: "@",
            symbol: "="
        },

answered Jun 14, 2016 at 14:39

Foker

1,0113 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Attribute not evaluating in Angular directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related