ngrepeat not working when passing JSON array into angular directive

Question

I am trying to pass an array of JSON objects into my directive and then repeat them back using ngrepeat, however it is not working and it is not clear why.

I have created a jsfiddle which shows the problem that I am experiencing.

https://jsfiddle.net/HB7LU/15997/

Is anybody able to tell me what I am doing wrong? I don't understand why it won't let me do this.

var myApp = angular.module('myApp',[]);

myApp.directive('dir', function() {
    return {
        restrict: 'E',
        scope:{
            items: '@'
        },
        replace: true,
        template: '<div><h6>descriptions below</h6><div ngrepeat="x in items"><p>{{x.desc}}</p></div></div>',
        link :function(scope){
            console.log(scope.items);
        }
    };
});

callmekatootie · Accepted Answer · 2015-08-02 04:03:39Z

1

Firstly, you have a typo in your template. Its ng-repeat and not ngrepeat - notice the "-".

Secondly, you have defined your scope with the @ property. This causes the data that you pass to be in the form of a string and not the original type.

You have two choices here. Either parse the string to its original type using JSON.parse() or use the = property type which passes the data to the scope in its original format.

Working Fiddle

answered Aug 2, 2015 at 4:03

callmekatootie

11.2k16 gold badges74 silver badges109 bronze badges

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

1 Comment

Jamesla Over a year ago

Thank you the ngrepeat was a bug that cropped up in my POC rewrite thank you very much changing the @ which I thought only meant read only to an = was the answer.

Collectives™ on Stack Overflow

ngrepeat not working when passing JSON array into angular directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related