Enrico Maim: Transclusion

by codef0rmer

HTML

<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<div ng-controller="EnricoCtrl">
    <!-- <p id="unique_1" enrico-transcluder>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos accusamus placeat dignissimos impedit esse quam aperiam, nihil vel fuga aspernatur molestiae assumenda quasi magni dolorum dolor totam ea nulla voluptate!</p> -->
</div>

CSS

body { padding: 10px; }

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('EnricoCtrl', function ($scope, $element, $compile) {
	var transcludedContent = localStorage.getItem('unique_1');
  if (transcludedContent) {
  	$element.append('<p id="unique_1" enrico-transcluder></p>');
    $compile($element[0].children[0])($scope);
  }
});

myApp.directive('enricoTranscluder', function() {
  return {
  	restrict: 'A',
    link: function(scope, element, attrs) {
    	var transcludedId      = element[0].getAttribute('id');
    	var transcludedContent = localStorage.getItem(transcludedId);
	    if (transcludedContent) element[0].innerHTML = transcludedContent;
    	
      element[0].setAttribute('contentEditable', 'true');
			element[0].addEventListener("input", function() {
        localStorage.setItem(transcludedId, element[0].innerHTML);
      }, false);
    }
  }
});