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