0

Can anyone tell me what I'm doing wrong here? Is it possible to interpolate the image array the way I'm trying to here? I know that the object is working, because the inkObject.header property interpolates fine to the page, but the array, which has an assortment of images, is not working for some reason... I'm not sure if if it won't allow you to pass an array like this, within the object, or if I'm just doing something wrong.

Thanks. 

    //Controller in app.js 
    app.controller('galleryCtrl', ['$scope', '$http','$location',
           function ($scope, $http, $location) {
               $scope.ink = {
                    header: "Personalized Ink Products",
                    imageArray:  [

                    'ink-1.jpg', 
                    'ink-2.jpg',  
                    'ink-3.jpg',
                    'ink-4.jpg'
                    ]

           };
}]); 
    //my directive in app.js
app.directive('pictureGallery', function () {
    return {
        templateUrl: 'directives/picturegallery.html',
        replace: true,
        scope: {
            inkObject: '='

            }
    }

});

//the template

<div class="top-space">
    <h1>{{ inkObject.header }}</h1>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-4" ng-repeat="image in {{ inkObject.imageArray }}">
            <a href="img/{{image}}" target="_blank">
            <img ng-src="img/{{image}}"  width="200px" height="200px" 
            class="img-responsive img-thumbnail bottom-space"> 
            </a>  
        </div>
    </div>
</div>


//the view
<picture-gallery  ink-object="ink"> </picture-gallery>
brandon
  • 1
  • 1

3 Answers3

0

your directive should :

return {
    ....
    restrict : 'E',  // Element name
    ....
}

the default is 'A'(Attribute)

And in the template, the ng-repeat's usage 

< ...   ng-repeat="image in inkObject.imageArray" ...>

don't need the {{ }}

qiyon
  • 31
  • 4
  • Hey, thanks for the response. Still though, despite adding the restrict property, the images aren't showing up. – brandon Mar 21 '16 at 03:16
0

I think the issue is with the ng-repeat part, you can refer the plnkr: http://plnkr.co/edit/rPi20W9AVnJL6BGS1jEh?p=preview

I just replaced

ng-repeat="image in {{ inkObject.imageArray }}"

with

ng-repeat="image in inkObject.imageArray"

and it worked.

Harpreet
  • 1,527
  • 13
  • 25
  • I will also suggest to verify if the images actually exist on the referred path via `ng-src` in `image` tag or the path referred is correct. – Harpreet Mar 21 '16 at 06:48
0

It turned out that, like both commenters suggested, I needed to take the brackets out, that is {{inkObject.imageArray}} should be inkObject.imageArray. However, I had tried that when it was suggested, and it wasn't working at first. What I realized was that my browser was caching the data from the directive, and so the edits I was making weren't being displayed on the screen. Apparently, that can happen often with directives in AngularJs. So, watch out for that! Once I realized that, I added a query string to the end of the templateUrl and I could then actually see edits I was making to the directive and see that all I had to do was remove the brackets.

brandon
  • 1
  • 1