Transcluding External Scopes

You can set the transclude option in the directive definition to true or false. If it is set to true, then components inside the directive have access to the scope outside the directive. 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";
  });