Andre Steyn Andre Steyn - 1 year ago 86
AngularJS Question

Attribute not evaluating in Angular directive

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


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


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


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


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 Source

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: "="
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download