AngularJS: How can I plug a directive into a template? - angularjs

Question

I'm trying to write a generic confirmation screen. I'd like to reuse it across a variety of different entities. Each entity has a different directive used to render it to screen.
Is there a way to write a template with a "directive-shaped hole" (my-directive below) that I can fill in programmatically?
<div>
Are you sure you want to blah?
<directive-from-scope value-from-scope="theValue" params-from-scope="theParams" />
</div>

Answer 1

I solve it with built-in ng-include directive.
Assume you have some directive with getTemplateUrl() function. You can put any login into this function but it should basically return you a string with the template URL.
Then you can do next thing in your directive template.
<div ng-include="directiveCtrl.getTemplateUrl()"></div>
Tag that you use doesn't matter, it can be any HTML tag, just choose one that works better for you.
Now in each template you can have whatever you want: directive, HTML with some controller on it, etc.

Answer 2

You can create directive with transclude:
angular.module('app', []).directive('myDirective', function() {
return {
restrict: 'E',
transclude: true,
template: `
<div class='borders'>
Are you sure you want to blah?
<div ng-transclude></div>
</div>
`
};
}).controller('ctrl', function($scope){
$scope.log = console.log;
$scope.title = 'Simple title';
});
.borders {
border-style: solid;
border-width: 1px 1px 1px 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<my-directive>
<ul>
<li>first</li>
<li>second</li>
</ul>
<input type='button' value='Log' ng-click="log(title)"/>
</my-directive>
<my-directive>
<h4>{{title}}</h4>
</my-directive>
</div>