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

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);
                      });
                    }
                })
            });
         ...

You can add a click handler like in this fiddle. I'm posting this not as an answer because I don't understand your problem. If you could add the complete table markup and what you'd like to do with the table. Maybe I could help you better. — AWolf
– AWolf, Commented Mar 25, 2016 at 0:04
Thanks, that got me a little further. Just not clear on how to update the scope vars when there's no template involved. — neridaj
– neridaj, Commented Mar 25, 2016 at 1:06
I still don't understand why you can't use a template. You could add a tbody tag to your markup and then add your directive there. (If that's possible in your table.) — AWolf
– AWolf, Commented Mar 25, 2016 at 2:04
OMG! I can't believe I overlooked tbody!!! Thanks a million, totally solved my issues! — neridaj
– neridaj, Commented Mar 25, 2016 at 18:46

Bettimms · Accepted Answer · 2016-03-25 07:59:13Z

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);

edited Mar 25, 2016 at 7:59

answered Mar 25, 2016 at 6:03

Bettimms

6715 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hoa · Accepted Answer · 2018-05-04 08:32:55Z

0

Another option is

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

answered May 4, 2018 at 8:32

Hoa

3,2171 gold badge28 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related