Use angular directive as attribute of custom directive

Question

I'm trying to edit this gentleman's fiddle (http://jsfiddle.net/Wijmo/ywUYQ/) to add ng-click functionality to panes.

My goal is to add an ng-click function to the pane directive so when this is clicked the action specified runs.

Example:

<tabs>
    <pane ng-repeat="candy in candies" title="Tasty {{candy.name}}" ng-click="addChocolate(candy)">
</tabs>

You will see in the snippet that the pane directive works by calling addPane in the tabs's controller adding itself to it's pane list. The tabs directive is responsible of handling the click event and showing the correct pane. So..... any ideas?

Here's a snippet as shown in the fiddle:

angular.module('components', [])
  .directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: ["$scope",
        function($scope) {
          var panes = $scope.panes = [];

          $scope.select = function(pane) {
            angular.forEach(panes, function(pane) {
              pane.selected = false;
            });
            pane.selected = true;
          }

          this.addPane = function(pane) {
            if (panes.length == 0) $scope.select(pane);
            panes.push(pane);
          }
        }
      ],
      template: '<div class="tabbable">' +
        '<ul class="nav nav-tabs">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
        '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
        '</li>' +
        '</ul>' +
        '<div class="tab-content" ng-transclude></div>' +
        '</div>',
      replace: true
    };
  })
  .directive('pane', function() {
    return {
      require: '^tabs',
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
      replace: true
    };
  })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="components">
  <h3>BootStrap Tab Component</h3>
  <tabs>
    <pane title="First Tab">
      <div>This is the content of the first tab.</div>
    </pane>
    <pane title="Second Tab">
      <div>This is the content of the second tab.</div>
    </pane>
  </tabs>
</body>

@RobertAKARobin how to add the ng-click directive to the pane so that when clicked it executes such ng-click's function — Nicolas Schejtman
– Nicolas Schejtman, Commented Dec 17, 2015 at 14:46

Jeff McMahan · Accepted Answer · 2015-12-17 14:50:51Z

1

When your directive returns the HTML for your pane, ng-click=... isn't being compiled by Angular. You can use the $compile service to compile the pane directive's output HTML, so that Angular can register your callbacks as handlers for the onclick event.

The output HTML would be handled like this: $compile(html)(scope), within a link function.

answered Dec 17, 2015 at 14:50

Jeff McMahan

1,32312 silver badges15 bronze badges

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

1 Comment

Nicolas Schejtman Over a year ago

This sounds right! Sadly I'm new to angular. Can you plz walk me through it ? :)

Guillaume Thivet · Accepted Answer · 2015-12-17 14:49:18Z

0

You can try something like this :

.directive('pane', function() {
return {
  require: '^tabs',
  restrict: 'E',
  transclude: true,
  scope: {
    title: '@',
    paneClick: '=',
    paneClickAttr: '='
  },
  link: function(scope, element, attrs, tabsCtrl) {
    tabsCtrl.addPane(scope);
  },
  template: '<div ng-click="paneClick(paneClickAttr)" class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
    '</div>',
  replace: true
};})


<pane title="First Tab" pane-click="addChocolate()" pane-click-attr="candy">

answered Dec 17, 2015 at 14:49

Guillaume Thivet

112 bronze badges

Collectives™ on Stack Overflow

Use angular directive as attribute of custom directive

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related