Take the 2-minute tour ×

I am new to Angularjs. Want to see if there is any way to just use a child directive as a placeholder for holding content but for really rendering?

I don't want to do rendering in the child directive because I want to let the parent to do everything. So I can have some other special logics in the parent directive.

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

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

        $scope.createPane = function() {
          var pane = panes[panes.length-1];
          var clonedPane = Angular.copy(pane);

        this.addPane = function(pane) {
          if (panes.length == 0) $scope.select(pane);
        '<div class="tabbable tabs-left">' +
          '<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>' +
            '<li ng-class="addLink"><a ng-click="createPane()"><i class="icon-plus"></i> tab</a></li>' +
          '</ul>' +
          '<div class="tab-content">' + 
            '<div ng-repeat="pane in panes" class="tab-pane" ng-class="{active: selected},{{pane.pclass}}" id="{{pane.id}}">' + 
              '{{ pane.content }}' +
            '</div>' +
          '</div>' +
        replace: true
  directive('pane', function() {
    return {
      require: '^tabs',
      restrict: 'E',
      scope: { title: 'bind', pclass: 'bind', id: 'bind' },
      link: function(scope, element, attrs, tabsCtrl) {
        var text = element.text();
          title: scope.title, 
          pclass: scope.pclass, 
          id: scope.id, 
          content: text

Corresponding html code:

  <pane title="tab 1" id="tab1" pclass="tab">
  <pane title="tab 2" id="tab2" pclass="tab">

I tried something like the above but nothing is pushed into panes. Seems like the link function of the child directive (pane) is never called. So as a result, only the link for adding tab is displayed.

Any ideas?


share|improve this question

2 Answers 2

The easiest (though sort of annoying) way to approach this would be to have a template for each pane.

In html:

  <pane title="tab 1" id="tab1" pclass="tab" template="pane1-templ">
  <pane title="tab 2" id="tab2" pclass="tab" template="pane2-templ">
<script type="text/ng-template" src="pane1-template">hello</script>
<script type="text/ng-template" src="pane2-template>wolrd</script>

In your directive:

         '<div ng-include src="pane.template"></div>' +
    '</div>' +

Or.. have you tried doing this to fix it?

In pane:

var html = elm.html();
pane.html = html;

In tabs:

<div ng-bind-html-unsafe="pane.html"></div>
share|improve this answer
Could you elaborate more on this? Don't really understand how I should do. Seems like there must be ng-transclude in both tabs and pane directive for the function link got triggered. –  Chris Jun 2 '12 at 6:36

Perhaps the reason why it is not working is because in your child directive you have no template.. Without a template, the directive does not know where and how to render the directive..

What you could do is have something like

template : '<div style="display:none;" ng-transclude></div>'

in your child template..

and your element.text() should still work!

Without a template.. the linking function would never get the 'element' so your child directive will fail right there..

With the template above it should work..

share|improve this answer
I tried to add this to the directive "pane", but it doesn't work. Then I tried to also add this to the parent directive. It looks better. But not working too. It works better because the link function got called. But element.text() returns empty string. –  Chris Jun 1 '12 at 14:47
Also, this is not something I want to have even if it works. Because I try to put a form there in each tab page. If I need to do it in the way you describe, even if it works, there would be more input fields. Although this is hidden, the data would got transmitted to server side when submitted. This is not what I want. –  Chris Jun 1 '12 at 14:49
Why do you want to describe a tab directive in this way ? Is there a specific reason ? –  ganaraj Jun 1 '12 at 14:52
hmm .. actually I want to have the pane directive holding the elements in the page. And I want to have a functionality to add a new tab page there. Think of many other different ways, but still no lucks. Seems like better to have all the data of panes stored in the tab's scope so that I can clone one of them when creating a new tab page. –  Chris Jun 1 '12 at 15:37
actually I need functionality similar to this angular-bootstrap-ui. but I want to have all the things handled by the component itself. If you check the link I refer here, it stores the items in a outer controller and the add and delete functions are also in the outer controller. I want to let the component itself handles all these things. –  Chris Jun 1 '12 at 15:45

Your Answer


