AngularJs vs EmberJs

transclude

Next, we add transclude, like so:

App.directive('fooComponent', function() {
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'components/foo.html'
    };
});

… and we modify the template file at components/foo.html:

<div>
    <div ng-transclude></div>
    <p>Foo component</p>
</div>

Do not let the word transclude scare you - I think of it, simply, as include with an outside transfer. All it really means is that we can now do this in the DOM:

<foo-component>
    <p>Some text included from outside the component</p>
</foo-component>

And <p> tag containing "Some text included from outside the component", will get rendered within the <div> tag with the ng-transclude attribute.