AngularJS RecompileOn Directive

recompileOn.js

// Forked from: https://medium.com/@kentcdodds/angularjs-one-time-bindings-and-recompiling-templates-9857b2cead01
/* global angular */

var directives = angular.module('directives');

directives.directive('recompileOn', ['$parse', function($parse) {
  'use strict';
  return {
    transclude: true,
    link: function link(scope, $el, attrs, ctrls, transclude) {
      var previousElements;

      // compile();

      function compile() {
        transclude(scope, function(clone, clonedScope) {
          // transclude creates a clone containing all children elements;
          // as we assign the current scope as first parameter, the clonedScope is the same
          previousElements = clone;
          $el.append(clone);
        });
      }

      function recompile() {
        if (previousElements) {
          previousElements.remove();
          previousElements = null;
          $el.empty();
        }

        compile();
      }

      scope.$on(attrs.recompileOn, function(_new, _old) {
        console.log("recompileOn",attrs.recompileOn);
        var useBoolean = attrs.hasOwnProperty('useBoolean');
        if ((useBoolean && (!_new || _new === 'false')) || (!useBoolean && (!_new || _new === _old))) {
          return;
        }
        // reset kcdRecompile to false if we're using a boolean
        if (useBoolean) {
          $parse(attrs.recompileOn).assign(scope, false);
        }

        recompile();
      });
    }
  };
}]);