Take a look at this snippet of my HTML:
<section ng-controller="GalleryController as gallery">
<nav footer-directive></nav>
</section>
This is the GalleryController I'm using:
angular
.module('myapp')
.controller('GalleryController', GalleryController);
GalleryController.$inject = ['GalleryService'];
function GalleryController(GalleryService){
var self=this;
self.current_index=0;
self.leftArrow=function(){
if (self.photos.length!==0){
if (self.current_index===0) {
self.current_index=self.photos.length-1;
} else {
self.current_index--;
}
self.selected_photo=self.photos[self.current_index];
}
};
self.rightArrow=function(){
if (self.photos.length!==0){
if (self.current_index===self.photos.length-1) {
self.current_index=0;
} else {
self.current_index++;
}
self.selected_photo=self.photos[self.current_index];
}
};
self.searchResults=function(){
return GalleryService.getPhotos(self.search_tag,self.page).then(function() {
self.photos = GalleryService.photos;
self.selected_photo=self.photos[0];
var total=GalleryService.total_photos_number;
self.total_pages=total%15===0 ? total/15 : (total-total%15)/15+1;
});
};
self.searchResults();
}
The directive footerDirective I've implemented looks like this:
angular
.module('myapp')
.directive('footerDirective', footerDirective);
function footerDirective(){
return {
link: function(scope,elements,attributes){
var new_div=document.createElement("div");
new_div.setAttribute("ng-click", "gallery.leftArrow()");
new_div.innerHTML=content;
new_div.className=cname;
elements[0].appendChild(new_div);
}
}
}
I'm puzzled why the ng-click functionality isn't working on new_div?