Find clicked div angular directive - angularjs

Question

I simply want to find the clicked div with using a directive and what I have tried:
.directive('blocks', blocks);
function blocks(){
var linkFunc;
linkFunc = function(scope,element,attrs){
element.bind('click', function(){
//assign clicked div
var selectedDiv = $(this);
if(selectedDiv.hasClass('block1')){
console.log('block1 is clicked!');
}
});
};
return{
restrict: 'E',
link: linkFunc,
template: '<div class="block block1 block_unactive">DIV 1</div>' +
'<div class="block block2 block_unactive">DIV 2</div>' +
'<div class="block block3 block_unactive">DIV 3</div>' +
'<div class="block block4 block_unactive">DIV 4</div>'
};
};
that doesn't work.. How can I assign the clicked div as selectedDiv?
For Exp: On click a div; check the click div and if the clicked div hasClass 'block1' do block1 actions.. if the div hasClass 'block2' do block2 actions... etc..
Thank you in advance!

Answer 1

i've another way to handle issue like that, passing div number to a service which will apply the desired action.
we have three files
the view index.html
<section ng-controller="BlockController as block">
<ul>
<li ng-class="{ selected: block.isSet(1) }">
<a href ng-click="block.setTab(1)">Block 1</a></li>
<li ng-class="{ selected: block.isSet(2) }">
<a href ng-click="block.setTab(2)">Block 2</a></li>
...........
</ul>
</section>
the controller main.js
var app = angular.module('mainApp', ["ServicesModule"]);
app.controller('BolckController',["service",function("service"){
this.block = 1;
this.setBlock = function(newValue){
this.block = newValue;
//service is defined in servicesModule.js
service.doBlockAction(newValue);
};
this.isSet = function(blockName){
return this.block === blockName;
};
}
] );
the service servicesModule.js
var ServiceApp = angular.module('ServicesModule', []);
ServiceApp.factory('service', function() {
var doAction=function(BlockName){
if(BlockName === 1)
{
console.log('block1 is clicked!');
}else{if(BlockName === 2)}
console.log('block2 is clicked!');
};
return {
doBlockAction : function(blockName) {
return doAction(blockName);
}
}
});
I dont test the syntax but the logic make sense to work properly
i hope it helps