Chapter 1: Directive transclusion

by msfrisbie

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <my-directive>
            <p>HTML template</p>
            <p>Scope from {{origin}}</p>
            <p>Overwritten? {{overwrite}}</p>
        </my-directive>
    </div>
    
<script type="text/ng-template" id="my-directive.html">
    <ng-transclude></ng-transclude>
    <hr />
    <p>Directive template</p>
    <p>Scope from {{origin}}</p>
    <p>Overwritten? {{overwrite}}</p>
</script>
</div>

JavaScript

angular.module('myApp', [])
.controller('MainCtrl', function ($scope) {
    $scope.overwrite = false;
    $scope.origin = 'parent controller';
})
.directive('myDirective', function() {
    return {
        restrict: 'E',
        templateUrl: 'my-directive.html',
        scope: {},
        transclude: true,
        link: function (scope) {
            scope.overwrite = !!scope.origin;
            scope.origin = 'link function';
        }
    };
});