kcd-recompile

kcd-recomplie.js

angular.module('kcd.directives').directive('kcdRecompile', ['$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.$watch(attrs.kcdRecompile, function(_new, _old) {
        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.kcdRecompile).assign(scope, false);
        }

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

Nice library, but I was having problems in some use cases, and after couple of hours noticed that if attrs.kcdRecompile evaluated in true in the first time, then $watch was called with _new and _old with "true" values and was forcing a new recompile(), while It shouldn't because compile() was already called when directive compiled.

I Had to add if(_new !== _old){recompile();} at the end of the $watch function in order to work properly.