I have been working on customizing a particular angular library to incorporate some new features. https://github.com/southdesign/angular-coverflow/blob/master/coverflow.js As part of this process, I am looking to attach click events to the elements being generated by the library. On examining lines 64-73 in the code, you can see how an element is appended to the DOM. However, adding an ng-click to line 72's template does not seem to have any effect. It appears that Angular may have already initiated the bootstrapping process and overlooked this newly added ng-click event. Can you suggest the correct approach for achieving this? Should I consider modifying the directive's template to use ng-repeat instead of relying solely on vanilla JavaScript to style each element individually? Alternatively, is there a way to incorporate Angular events using the current method?
Below is an explanation of the declaration of the directive along with the initialization of the coverflow plugin during the link (postlink) phase.
function coverflowDirective () {
return {
restrict: 'E',
replace: true,
template: '<div class="coverflow-container"></div>',
scope: { images: "=" },
link: function(scope, element, attrs) {
// Initialize
scope.coverflow = new Coverflow({
height: 320,
width: 568,
element: element,
scope: scope,
images: scope.images
}).init();
// Setup touch listeners
element.bind('touchstart', scope.coverflow.touchStart.bind(scope.coverflow));
element.bind('touchmove', scope.coverflow.touchMove.bind(scope.coverflow));
element.bind('touchend', scope.coverflow.touchEnd.bind(scope.coverflow));
// Setup mouse listeners
element.bind('mousedown', scope.coverflow.mouseDown.bind(scope.coverflow));
element.bind('mousemove', scope.coverflow.mouseMove.bind(scope.coverflow));
element.bind('mouseup', scope.coverflow.mouseUp.bind(scope.coverflow));
},
controller: function ($scope) {
$scope.logIndex = function(index) {console.log(index);};
}
};
}
My initial attempt at integrating an ng-click into the template is shown below.
Cover.prototype.template = function() {
return '<div class="coverflow-cover" ng-click="console.log(1)" id="coverflow-cover-id-' + this.coverId + '"></div>';
};