Angular：带有父子指令的模板

Question

I have this simple example...

Code:

angular
      .module('app', [])
      .directive('parentDirective', parentDirective)
      .directive('childDirective', childDirective);

    function parentDirective() {
      return {
        restrict: 'E',
        scope: true,
        //template: 'My job is {{job}}', 
        controller: function($scope) {
          $scope.job = 'trashman';
          $scope.say = function(job) {
            $scope.job = job;
            alert($scope.job);
          }
        }
      };
    }

    function childDirective() {
      return {
        restrict: 'E',
        link: function(scope) {
          scope.say('shoe shine boy');
        }
      };
    }

Markup:

    <parent-directive>
        <child-directive></child-directive>
    </parent-directive>

This works as expected. The problem I'm having is understanding why I can't add a template to the the parentDirective and achieve the same result. If you un-comment the template property, the binding doesn't change and the alert is no longer fired. Can someone briefly explain to me what's happening here? Maybe help flesh out my example? I learn by example :)

Answer 1

You can set a template property on the parent and inside the template use the child directive. It should ideally render automatically.

Something like:

angular .module('app', []) .directive('parentDirective', parentDirective) .directive('childDirective', childDirective);

function parentDirective() {
  return {
    restrict: 'E',
    scope: true,
    template: '<div>{{job}} is seen<child-directive></child-directive></div>'
    //template: 'My job is {{job}}', 
    controller: function($scope) {
      $scope.job = 'trashman';
      $scope.say = function(job) {
        $scope.job = job;
        alert($scope.job);
      }
    }
  };
}

function childDirective() {
  return {
    restrict: 'E',
    template: '<div>I will be renderred</div>',
    link: function(scope) {
      scope.say('shoe shine boy');
    }
  };
}

Now you can use the parent directive anywhere and it will render the child directive inside it as well.

Something like:

<parent-directive></parent-directive>

Angular will now see it like this, parent directive found, render it, inside it is a child directive used, render the child's html.

Answer 2

When you use the directive template, then it replaces the directives inner content with the template and most probably due to that the inner directive is never rendered.

You need to use ng-transclude in the parent template to emit the child directive html inside the parent directive template. On your directive definition object mark

transclude: true,

and

template: '<div> My job is {{job}} <ng-transclude></ng-transclude></div>'

This is from the $compile documentation

Replace the contents of the directive's element (default).

Replace the directive's element itself (if replace is true - DEPRECATED).

Wrap the contents of the directive's element (if transclude is true).