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

musically_ut · Accepted Answer · 2014-09-09 10:23:28Z

3

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.

answered Sep 9, 2014 at 10:23

musically_ut

34.3k9 gold badges97 silver badges110 bronze badges

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

4 Comments

user1551211 Over a year ago

i tried with that too and then appears this error Error: Error: [$parse:syntax] errors.angularjs.org/1.2.23/$parse/…

musically_ut Over a year ago

@user1551211 Use interest-points="points" instead of interest-points="{{points}}". Updated the answer.

user1551211 Over a year ago

Thanks musically_ut it works with that but now the owl carousel don't load well because the link fires first ng-repeat... i don't know if i could do something with scope.$watch..?

musically_ut Over a year ago

@user1551211 The problem is that you should call .owlCarousel on the element while deep-$watching the interestPoints array. Otherwise, indeed, the function will be called before ng-repeat has had a chance to run. If you need more help with that, please post a different question.

Collectives™ on Stack Overflow

Pass array object from controller to custom directive in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related