Angularjs directive: how to pass an array via attribute?

Question

I need to pass an array of photo description to my directive. As I am struggling to make it working, I just realized that angular took my list attribue as a string rather than an array.

Here is the directive call:

    <photos photoid="ImpactDemiPrecoce" list="[{file:'rsc/drive/4-Semis/d-ChoixDeLaDensite/ImpactDemiPrecoce'}]" extension="png"></photos>

The Directive is as follows:

app.directive("photos", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            "photoid": "@",
            "scrollable": "@",
            "size": "@",
            "list": "@",
            "extension": "@"
        },
        template: 
        '<div id="photos{{photoid}}" class="scroller" ng-class="[{{scrollable}}]" ng-style="{width: list.length==1?size:\'auto\', height: size}">\n\
         # of photos is {{list.length}}.<br>\n\
            <div ng-repeat="p in list track by $index"\n\
                ng-style="{\'background-image\': \'url({{p.file}}.thumb.{{extension}})\'}"\n\
                ng-click="openPopoverImageViewer(\'#photos{{id}}\', {{$index}})">\n\
                <div>{{p.text}}</div>\n\
            </div>\n\
        <div>',
        link: function (scope, element, attr) {
            if (!scope.extension)   scope.extension="jpg";
            if (!scope.scrollable)  scope.scrollable="hScrollable";
            if (!scope.size)        scope.size="171px";
        }
    };
});

The directive displays "# of photos is 126." which is the length of the string within the list attribute.

How to do it?

Possible duplicate of http://stackoverflow.com/questions/20811527/angularjs-pass-newly-created-array-in-attribute-to-directive — Mik378, Sep 21 '14 at 14:18

score 1 · Accepted Answer · edited May 23 '17 at 10:27

You are setting the scope wrong for the list element. @ will take the value instead of the object. You need to use = instead.

app.directive("photos", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            "photoid": "@",
            "scrollable": "@",
            "size": "@",
            "list": "=",
            "extension": "@"
        },
        template: 
        '<div id="photos{{photoid}}" class="scroller" ng-class="[{{scrollable}}]" ng-style="{width: list.length==1?size:\'auto\', height: size}">\n\
         # of photos is {{list.length}}.<br>\n\
            <div ng-repeat="p in list track by $index"\n\
                ng-style="{\'background-image\': \'url({{p.file}}.thumb.{{extension}})\'}"\n\
                ng-click="openPopoverImageViewer(\'#photos{{id}}\', {{$index}})">\n\
                <div>{{p.text}}</div>\n\
            </div>\n\
        <div>',
        link: function (scope, element, attr) {
            if (!scope.extension)   scope.extension="jpg";
            if (!scope.scrollable)  scope.scrollable="hScrollable";
            if (!scope.size)        scope.size="171px";
        }
    };
});

You can find the difference of @ and = over here well explained

Angularjs directive: how to pass an array via attribute?

1 Answers1