I have been writing down a module for image gallery, I have got a issue with it, my isolate scope is becoming undefined and does not change its state. I cannot understand the reason for it.
I have attached a plnkr - http://plnkr.co/edit/3SJF4AwTeL2osvdEOlmc?p=preview
gallery.directive.js
(function () {
'use strict';
function GalleryDirective () {
var directive = {
link: link,
restrict: 'E',
replace: true,
templateUrl: './gallery.html',
controller: 'GalleryController',
controllerAs: 'galc',
bindToController: true,
scope: {
'gallerydata': '='
}
};
return directive;
////////////////////////////
function link (scope, element, attribute) {
}
}
GalleryDirective.$inject = [];
angular.module("gallery").directive("gallery", GalleryDirective);
})();
What am I doing wrong?
EDIT
Now I have added entirety of I was using inorder to curb the confusion of global variable - please see code here http://plnkr.co/edit/3SJF4AwTeL2osvdEOlmc?p=preview
I have been using it with store directive - where gallery directive consumes data from it.
Question - I accept the images are appearing perfectly, but in my console I am not able to see Array[3]
, instead an undefined
is printed. Check the line below Gallery Controller where I try printing vm.gallerydata
from the console.
EDIT
I am able to see the images appearing in the view, but controller prints vm.gallerydata
to be undefined.
You're passing in the data as a global variable, that won't work.
gallery_data
wasn't defined on any controller nor was the directive being used in a controller context. I've added a basic controller where the data gets instantiated, I've also added the controller on the body.Here is an updated working plunkr