CODEWITHSUNDEEP
angularjs
Andre Steyn
Andre Steyn

Reputation: 33

Attribute not evaluating in Angular directive

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.

Upvotes: 2

Views: 93

Answers (2)

Foker
Foker

Reputation: 1011

you should declarate your props this way

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

Upvotes: 0

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11388

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: "="
        },

Upvotes: 2

Related Questions