Seeking guidance on the issue I'm facing. Is it feasible to interpolate the image array in this manner? The inkObject.header property interpolates properly onto the page, but the array containing a variety of images seems to be causing some trouble...I am uncertain whether passing an array like this within the object is not allowed or if I have made a mistake somewhere.
Appreciate any help.
//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>