Transcluding Elements

Transcluding can be kind of a difficult concept to pick up on at first. Basically, the idea is that you can keep the contents of the custom directive defined in an AngularJS template and bind them to the scope. The way this works is that the linking function for the directive receives a transclusion function that is prebound to the current scope. Then elements inside the directive have access to the scope outside the directive.

You can set the transclude option to the following values:

■ true: Transcludes the content of the directive.

■ 'element': Transcludes the whole element, including any directives defined at lower priorities.

You must also include the ngTransclude directive in elements inside your directive template. The following is an example of implementing transclude to access the title variable in the controller scope from the myDirective directive template:

Click here to view code image

angular.module('myApp', []).
  directive('myDirective', function() {
    return {
      transclude: true,
      scope: {},
      template: '<div ng-transclude>{{title}}</div>'
    };
  }).
  controller('myController', function($scope) {
    $scope.title="myApplication";
  });