Pass array object from controller to custom directive in AngularJS

Question

Im trying to pass a array of objects from a angular controller to a custom directive element and iterate the object with ng-repeat, but appears the following error: [ngRepeat:dupes]

home.js:

home.controller("homeController", function ($scope) { $scope.points =[ { "url": '../assets/images/concert.jpg', "id":1 }, { "url": '../assets/images/dance.jpg', "id":2 }, { "url": '../assets/images/music.jpg', "id":3 }, { "url": '../assets/images/jazz.jpg', "id":4 }, { "url": '../assets/images/violin.jpg', "id":5 }, { "url": '../assets/images/music.jpg', "id":6 } ]; }); 

Shareddirectives.js:

var sharedDirectives = angular.module("sharedDirectives", []); sharedDirectives.directive("interestPoints", function () { function link($scope, element, attributes, controller ) { $(element).find('#interest-points').owlCarousel({ items : 4, //4 items above 1200px browser width itemsDesktop : [1200,3], //3 items between 1200px and 992px itemsDesktopSmall : [992,3], // betweem 992px and 768px itemsTablet: [850,2], //1 items between 768 and 0 itemsMobile : [600,1] // itemsMobile disabled - inherit from itemsTablet option }); } return { restrict: "E", templateUrl : "../html/views/interest-points.html", link: link, scope: { interestPoints: '@' } }; }); 

interest-points.html:

<div id="interest-points" class="owl-carousel"> <div ng-repeat="point in interestPoints" class="item"> <img ng-src="{{point.url}}" alt="Owl Image"><h4>27<br>JUL</h4> </div> </div> 

home.html:

<div ng-controller='homeController'> <interest-points interest-points="{{points}}""></interest-points> </div> 

I tried with track by $index but the error don't appear and it don't iterate

Answer 1

You are using interestPoints: '@' as the method of binding interestPoints to the scope. That actually binds only the string {{points}} to interestPoints instead of actually evaluating that expression in the parent's scope.

Use the interestPoints: '=' as the binding method and then interest-points="points" to get the desired behaviour.

Related docs under the heading Directive definition object.