Angular directive with no template - assign ng-click function from directive - angularjs

Question

How can I set the ng-click function on the element where my directive attribute is applied? After having issues with my directive template, because it spans multiple tr's, I resulted to using ng-repeat-start/end i.e., no template. So, my question is: what is the proper way to get the contents of the directive element into the isolate scope of the directive, so I can assign values/functions to it, as if it were the template?
// controller scope
<tr campaign-item ng-repeat-start="campaign in vm.allCampaigns.results | orderBy:vm.params.sort:vm.sortReverse track by $index" ng-if="vm.allCampaigns.totalCount > 0" campaign="campaign" close-preview="vm.hideCampaignPreview()" class="campaign-tr" id="campaign-{{campaign.id}}" ng-class="{'selected': showCampaignDetails}" user-role="{{vm.user.role}}" campaign-options="" campaign-detail="" show-campaign-details="">
<td>{{ campaign.name }}</td>
<td>{{ campaign.priority }}</td>
<td>{{ campaign.status }}</td>
<td>{{ campaign.createdBy }}</td>
<td>{{ campaign.approvedBy }}</td>
<td ng-show="item.releaseDate">{{ campaign.releaseDate * 1000 | date:'short' || ''}}</td>
<td ng-show="!item.releaseDate"></td>
<td ng-show="item.expirationDate">{{ campaign.expirationDate * 1000 | date:'short' }}</td>
<td ng-show="!item.expirationDate"></td>
<td>
<select id="campaign-options" name="campaignOptions" class="form-control" ng-model="selectedCampaignOption" ng-options="option for option in campaignOptions track by $index">
</select>
</td>
</tr>
<tr class="campaign-description campaign-{{campaign.id}}" ng-show="showCampaignDetails" ng-class="{'selected': showCampaignDetails}">
<td colspan="8">
<p> {{ campaignDetails.description }}</p>
</td>
</tr>
// directive
angular.module('fotaAdminPortal')
.directive('campaignItem', ['vsmsCampaignFactory', function (vsmsCampaignFactory) {
return {
restrict: 'A',
transclude: true,
scope: {
campaign: '=',
closePreview: '&',
userRole: '#',
campaignOptions: '=?',
showPreview: '=?',
showCampaignDetails: '=?',
campaignDetail: '=?'
},
// templateUrl: 'app/vsms/admin/campaign/campaign.tpl.html',
link: function(scope, element, attr, ctrl, transclude) {
scope.showCampaignDetails = false;
transclude(scope, function(clone) {
element.append(clone);
element[0].addEventListener('click', function(e) {
if(e.target.id == 'campaign-options') {
return;
} else {
vsmsCampaignFactory.getCampaign(scope.campaign.id)
.then(function(response) {
scope.showCampaignDetails = true;
scope.campaignDetails = response;
console.log(scope);
});
}
})
});
...

Answer 1

You might add ng-click from directive like so: (If you'd provide a fiddle or plnkr would be easier for us to test)
element.attr("ng-click", "onClick()");
If you have the onClick() function on controller add controllerName.onClick()
element.attr("ng-click", "vm.onClick()");
Then at the end
$compile(element.contents())(scope);
or
$compile(element)(scope);

Answer 2

Another option is
element.bind('click', function(e) {
// Handle onclick event here.
});