README
drpx-transcludeTo
An Angular directives/preLinkFunction generator to create multiple transcludes paired with transcludeTo/transcludeId (like Marionette region or ui-router siblings views).
It pairs transcludes target-to
elements into target-id
elements inside templates, even when ng-if
, ng-repeat
and others are involved.
Example/How to use
Imagine that you want to write something like this:
<my-custom-list>
<h1 target-to="header">People</h1>
<div target-to="item">
{{$parent.item}}
</div>
<div target-to="footer">
<button ng-click="add()">Add</button>
</div>
</my-custom-list>
With transcludeTo you should write myCustomList
directive as follows:
app.directive('myCustomList', ['transcludeToPreLink', function(transcludeToPreLink) {
return {
restrict: 'E',
templateUrl: 'myCustomList.html',
transclude: true, // needs transclusion activate
scope: {}, // needs own scope
link: {pre: transcludeToPreLink(), post: link},
};
function link(scope) {
scope.list = ['first','second','third'];
}
}]);
And the myCustomList.html
template can be as follows:
<div class="header" transclude-id="header">Default Header</div>
<ul>
<li ng-repeat="item in list" transclude-id="item"></li>
</ul>
<div class="footer" transclude-id="footer"><hr></div>
Install
$ bower install --save drpx-transcludeto
add to your module the dependence:
angular.module('yourModule', ['drpxTranscludeTo']);
include the javascript library in your application:
<script src="bower_components/drpx-transcludeto/drpx-transcludeto.js"></script>