Andre Steyn Andre Steyn - 5 months ago 12
AngularJS Question

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.

Answer

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