Create a wrapWith directive using advanced transclusion techniques.
transclude - compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.
true- transclude the content of the directive. (replace the whole stuff)
'element'- transclude the whole element including any directives defined at lower priority. (append to the dom)
See more:
Egghead.io
var egghead = angular.module("egghead", []);egghead.controller("AppCtrl", function () { var app = this; app.people = [{"firstName":"Sonia","lastName":"Hodges"},{"firstName":"Benedict","lastName":"Morrow"},{"firstName":"Keegan","lastName":"Fields"},{"firstName":"Jade","lastName":"Martinez"},{"firstName":"Jaquelyn","lastName":"Suarez"},{"firstName":"Leo","lastName":"Hughes"},{"firstName":"Skyler","lastName":"Sharp"},{"firstName":"Genevieve","lastName":"Villarreal"},{"firstName":"Beau","lastName":"Hendrix"},{"firstName":"Lara","lastName":"Howard"},{"firstName":"Jonah","lastName":"Crawford"},{"firstName":"Kendall","lastName":"Lane"},{"firstName":"Kimberly","lastName":"Mcclain"},{"firstName":"Ingrid","lastName":"Salinas"},{"firstName":"Moses","lastName":"Mcpherson"},{"firstName":"Britanney","lastName":"Sweeney"},{"firstName":"Patricia","lastName":"Perez"},{"firstName":"Roth","lastName":"Heath"},{"firstName":"Nora","lastName":"Osborne"},{"firstName":"Giacomo","lastName":"Shepard"}]});egghead.directive("wrapWith", function ($templateCache) { return { transclude: 'element', link: function (scope, element, attrs, ctrl, transclude) { var template = $templateCache.get(attrs.wrapWith); console.log(template); var templateElement = angular.element(template); console.log(element); transclude(scope, function (clone) { element.after(templateElement.append(clone)); }) } }});egghead.directive("cgForm", function ($templateCache) { return { restrict: "EA", templateUrl: "form-info" }});
result:
