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 stackoverflow.com/questions/20811527/… — Mik378
– Mik378, Commented Sep 21, 2014 at 14:18

Community · Accepted Answer · 2017-05-23 10:27:48Z

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

Collectives™ on Stack Overflow

Angularjs directive: how to pass an array via attribute?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related