Passing array via attribute to AngularJS directive

Question

I'm currently having a problem when passing an array to a directive via an attribute of that directive. I can read it as a String but i need it as an array so this is what i came up with but it doesn't work. Help anyone? thks in advance

Javascript::

app.directive('post', function($parse){
    return {
        restrict: "E",
        scope:{
            title: "@",
            author: "@",
            content: "@",
            cover: "@",
            date: "@"
        },
        templateUrl: 'components/postComponent.html',
        link: function(scope, element, attrs){
            scope.tags = $parse(attrs.tags)
        }
    }
}

HTML::

<post title="sample title" tags="['HTML5', 'AngularJS', 'Javascript']" ... >

Community · Accepted Answer · 2017-05-23 12:26:10Z

62

If you're accessing this array from your scope, i.e. loaded in a controller, you can just pass the name of the variable:

Binding array to directive variable in AngularJS

Directive:

scope:{
        title: "@",
        author: "@",
        content: "@",
        cover: "@",
        date: "@",
        tags: "="
    },

Template:

<post title="sample title" tags="arrayName" ... >

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Apr 30, 2013 at 2:26

Alex Osborn

9,8313 gold badges35 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arashsoft Over a year ago

What if it is an inline array: tags="[1 ,2 ,3]" ? Edit: I found my answer here: stackoverflow.com/q/20811527/3328979

Abhi Over a year ago

tags is undefined when i do console.log(scope.tags). what could be wrong

Shahadat Hossain · Accepted Answer · 2016-05-28 19:50:52Z

4

you can also have to use $scope instead of attrs. then you will get array object, otherwise you will get an string.

     scope:{
            title: "@",
            author: "@",
            content: "@",
            cover: "@",
            date: "@",
            tags: "="
        },


link: function(scope, element, attrs){
            scope.tags = scope.tags
        }

answered May 28, 2016 at 19:50

Shahadat Hossain

97910 silver badges27 bronze badges

Collectives™ on Stack Overflow

Passing array via attribute to AngularJS directive

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related