Search code examples
javascriptangularjsangularjs-directiveangularjs-ng-transclude

Alternative to Angular transclude fallback content in older versions


Transclude fallback content is one of the features added to Angular V1.5.0
I'm writing a dateTimePicker module for Angular and want to add custom user input template feature for next version and Transclude fallback content is exactly what i want, because if user put nothing inside the directive, default template will inject.
But i can't force everyone to use Angular V1.5.X
Is there any alternative solution?

Another Solution:
As i have a huge html template and can't make it single line string or ... to put it in JS file, i forked Mario Lamacchia idea.

HTML:

<div>
    <ng-transclude></ng-transclude> 
    <div ng-if="defaultTemplate">...</div>
</div>

JS:

link: function(scope, element, attrs, ngModel) {
    if (!element.find('ng-transclude').children().length) {
        scope.defaultTemplate = true;
        element.find('ng-transclude').remove();
    }
}

Solution

  • Adding this link function in 1.3.x version gives the same result of the 1.5.x example for transclude fallback content

    link: function(scope, element) {
      if (!element.find('ng-transclude').children().length) {
        element.find('button').append('<b style="color: red">Button1</b>');
      }
    }
    

    Plunker: http://plnkr.co/edit/7VHLsv