current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer
    
i tried with that too and then appears this error Error: Error: [$parse:syntax] errors.angularjs.org/1.2.23/$parse/… –  user1551211 Sep 9 '14 at 10:24
    
@user1551211 Use interest-points="points" instead of interest-points="{{points}}". Updated the answer. –  musically_ut Sep 9 '14 at 10:28
    
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..? –  user1551211 Sep 9 '14 at 10:38
    
@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. –  musically_ut Sep 9 '14 at 10:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.