AngularJS : Can't figure out why nested angular directive does not get rendered when transcluding with transclude:'element'

Question

I have this custom directive called 'panel'.

<panel title="One Title">
    One Body
    <panel title="Two Title">two</panel>
</panel>

My issue is that I cannot get the nested panel directive to render. Please see the plunkr http://plnkr.co/edit/D0LfQqBViuraSNfmym4g?p=preview for the javascript.

I expect

<div>
    <h1>One Title</h1>
    <div>
        One Body
        <div>
            <h1>Two Title</h1>
             <div>Two Body</div>
            </div>
        </div>
    </div>
</div>

but instead I get

<div>
    <h1>One Title</h1>
    <div>One Body</div>
</div>

As you will see, my aim is to render the output from data provided from the controller instead of manipulating the dom. I'm exploring the use of directives as just a means of collecting the data and providing it to the controller, so that the template can then just be rendered from data provided by the controller. As a result, I'm looking for a solution that does not use ng-transclude on a div but instead uses some combination of $compile and or transclude(scope, fun...) to achieve the stated goal. My aim is also in the process to better understand how $compile and transclude(scope, fun...) can be effectively used.

Answer 1

This isn't going to be simple, since you are willing to rely on the ng-bind-html.

Lets look at this first:

transclude(scope, function(clone, scope){
  panelCtrl.setBody($sce.trustAsHtml(clone.html()));  
});

The clone in the above function will contain a comment placeholder of a child panel directive like this:

One Body
<!-- panel: undefined -->

This is because the child panel directive have transclude: 'element', and its link function hasn't been run yet.

To fixed this is easy, just modify the code a bit:

var clone = transclude(scope, function () {});
panelCtrl.setBody($sce.trustAsHtml(clone.html()));

This way the clone will contain a real template like this:

One Body
<div class="ng-scope"><h1 class="ng-binding">{{panel.title}}</h1><div class="inner ng-binding" ng-bind-html="panel.body"></div></div>

Not so surprise, we now have a real template, but the bindings haven't happened yet, so we still can't use clone.html() at this time.

And the real problem begin: How can we know when the bindings will be finished

AFAIK, we can't know when exactly. But to workaround this we can use $timeout!

By using $timeout, we are breaking a normal compilation cycle, so we have to find some way to let parent panel directive know that the binding of child directives have been finished (in $timeout).

One way is using controllers for communication and the final code will look like this:

app.controller('PanelCtrl', function($scope, $sce) {    
  $scope.panel = {
    title: 'ttt',
    body: $sce.trustAsHtml('bbb'),
  }

  this.setTitle = function(title) {
    $scope.panel.title = title;
  };

  this.setBody = function(body) {
    $scope.panel.body = body;
  };

  var parentCtrl,
      onChildRenderedCallback,
      childCount = 0;

  this.onChildRendered = function(callback) {
    onChildRenderedCallback = function () {
      callback();

      if (parentCtrl) {
        $timeout(parentCtrl.notify, 0);
      }
    };

    if (!childCount) {
      $timeout(onChildRenderedCallback, 0);
    }
  };

  this.notify = function() {
    childCount--;

    if (childCount === 0 && onChildRenderedCallback) {
      onChildRenderedCallback();
    }
  };

  this.addChild = function() {
    childCount++;
  };

  this.setParent = function (value) {
    parentCtrl = value;
    parentCtrl.addChild(this);
  };
});

app.directive('panel', function($compile, $sce, $timeout) {
  return {
    restrict: 'E',
    scope: {},
    replace: true,
    transclude: 'element',
    controller: 'PanelCtrl',
    require: ['panel', '?^panel'],
    link: function(scope, element, attrs, ctrls, transclude) {
      var panelCtrl = ctrls[0];
      var parentCtrl = ctrls[1];

      if (parentCtrl) {
        panelCtrl.setParent(parentCtrl);
      }

      var template =
        '<div>' +
        '  <h1>{{panel.title}}</h1>' +
        '  <div class="inner" ng-bind-html="panel.body"></div>' +
        '</div>';

      var templateContents = angular.element(template);
      var compileTemplateContents = $compile(templateContents);
      element.replaceWith(templateContents);

      panelCtrl.setTitle(attrs.title);

      var clone = transclude(scope, function () {});

      panelCtrl.onChildRendered(function() {
        panelCtrl.setBody($sce.trustAsHtml(clone.html()));
        compileTemplateContents(scope);
      });
    }
  }
});

Example Plunker: http://plnkr.co/edit/BBbWsUkkebgXiAdcnoYE?p=preview

I've left a lot of console.log() in the plunker, you could have a look to see what are really happen.

PS. Things will be a lot easier if you don't use ng-bind-html and just allow DOM manupulations or using something like in @WilliamScott's answer.

Answer 2

Simplifying the directive results in what I think you're going for:

app.directive('panel', function(){
  return {
    restrict: 'E',
    template:'<div><h1>{{panel.title}}</h1><div ng-transclude></div></div>',
    scope: {},
    transclude: true,
    controller: 'PanelCtrl',
    link: function(scope, element, attrs, panelCtrl)
    {
      panelCtrl.setTitle(attrs.title);
    }
  }  
})

Here's a plunkr.