AngularJS - $transcludeFn

All $transcludeFn use cases

by Turi S

HTML

<script src="https://code.angularjs.org/1.2.28/angular.js"></script>
<section>
    <h1>simple demo:</h1>
    <p reset-on-click ng-class="'what'">repeated content</p>
</section>

CSS

section {
    background-color: #eee;
    padding: 20px 30px 20px 10px;
    position: relative;
}

.what {
    background-color: rgba(255,255,255,.5);
    margin: 0 0 10px;
    padding: 10px;
    position: relative;
    animation: slide 3s ease;
}

@keyframes slide {
  from {left:0}
  to {left:80%}
}

JavaScript

(function (app) {
    'use strict';
    
      
    app.directive('resetOnClick', ['$timeout', function ($timeout) {
        return {
            link: function (scope, element, attrs, ctrl, $transcludeFn) {   
            	var linkedClone = $transcludeFn();
              console.log(linkedClone);
              element.after(linkedClone);
              
              
              
              element.parent().on('mousedown', function(){
              	console.log('pooop');
       					element.next().remove();
                element.after(linkedClone);
              });
            },
                
            priority: 600,
            transclude: 'element'
        };
       
    }]);

}(angular.module('app', [])));