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();
      });
    }
  };
}]);

How (or I guess, why) does this differ from the one in your video: https://www.youtube.com/watch?v=hFOSXVT-Cps?

@CWSpear, sorry, I don't get notifications when comments are placed on my gists. I just updated this code. Hopefully this is helpful!

Came across an interesting issue. I'm still debugging, but it appears that child component scopes are never destroyed when I do a recompile using this directive. Say I have the following:

<div kcd-recompile="$ctrl.reload" use-boolean>
  <custom-component ng-repeat="item in ::$ctrl.items"></custom-component>
</div>

After I set this.reload = true in the parent component controller and I see the ng-repeat recompile, if I check the scope tree in batarang, I can see all of the old custom-component scopes still hanging out there, and they continue to stack up each time I recompile.

I'm wondering if I should add this.$element.on('destroy', () => this.$scope.destroy()) to any child components I want to use within a kcd-recompile element, or if there's a way for that to be handled from within the kcd-recompile directive itself.

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.