Angular delayed transclude test

by Aides

HTML

<div ng-app="app">
  <div ng-controller="testCtrl as test">
    
    <button ng-click="test.click()" value="Click">
      Test
    </button>
    <div trans-x load="{{test.load}}">
      <p>
        Directive loaded
      </p>
      <p ng-bind="varFromScope">
      
      </p>
    </div>
  </div>
</div>

JavaScript

angular.module('app', [])
  .controller('testCtrl', ['$scope', function($scope) {
  	var self = this;
    
             
    this.click = function()
    {
    	self.load = true;
    }
  }])
  .directive('transX', function()
  {
  	return {
    	restrict: 'A',
      scope: {
      	load: '@'
      },
      transclude: true,
    	link:
      {
      	pre: function(scope, element, attrs, ctrl, transclude)
        {
        	if(transclude)
          {
          	attrs.$observe('load', function(value)
            {
            	if(value === "true")
              {
              	transclude(scope, function(clone)
                {
                	element.append(clone);
                });
              }
            });
          }
        }
      }
    }
  });