With the built-in ng-transclude the the scopes become siblings. What if we want the transcluded HTML to inherit the scope of our directive?
Thanks to Controlling Scope on the Transclude Function on ng-nuggets I was able to figure this out:
angular
.module('myApp.myModule')
.directive('myDirective', myDirective);
function myDirective() {
return {
controller: Controller,
transclude: true,
restrict: 'E',
controllerAs: 'vm',
link: linkThatTranscludeWithOurScope,
scope: {}
};
}
function linkThatTranscludeWithOurScope(scope, element, attrs, ctrl, transclude) {
transclude(scope, function (clone) {
element.append(clone);
});
}
PS. Do not include any template with this directive!