I am working on angularjs, and I have created some directives with bunch of HTML elements within its templates. I have assigned a controller for those directives. Below is my code snippet:
directives.directive('ngLd',function()
{
return {
restrict : "AE",
templateUrl:'partials/ld.html',
scope:{},
link : function(scope,element,attr)
{
var lbutton = element.find("span[class='lb-lk-comm']");
var dlbutton = element.find("span[class='lb-dlk-comm']");
if(lbutton && dlbutton)
{
lbutton.bind('click',function(event)
{
scope.likeAction(lbutton.hasClass("lb-voted-comm"),dlbutton.hasClass("lb-voted-comm"));
scope.$apply();
});
dlbutton.bind('click',function(event)
{
scope.dislikeAction(lbutton.hasClass("lb-voted-comm"),dlbutton.hasClass("lb-voted-comm"));
scope.$apply();
});
}
},
controller : "MyController"
};
});
In the above code, I have used a link function of bind the click event on required elements.
Another approach I could have followed to use the ngClick directive directly over the elements, but that is sort of exposing method to client end.
My question is, am I following a good approach by binding click event ? or should I use ngClick ?
I am using angular.bootstrap(document,"myApp"); to bootstrap the angular module to document, so I was wondering if I could have similar thing to dynamically bind those events (click, hover, change etc) to my HTML elements, without exposing them to HTML pages.
