AngularJS : transcluding multiple sub elements in a single Angular directive

Question

I am Fairly new to Angular but have been reading quite a lot. I was reading about ng-transclude at http://docs.angularjs.org/guide/directive#creating-custom-directi

Answer 1

In our project we have modeled multi site trasclusion after JSF 2's ui:composition, ui:insert, ui:define (see ui:composition).

Implementation consists of three simple directives: ui-template, ui-insert, ui-define (see angularjs-api/template/ui-lib.js).

To define a template one writes the following markup (see angularjs-api/template/my-page.html):

and declares a directive (see angularjs-api/template/my-page.js):

  var myPage = 
  {
    templateUrl: "my-page.html",
    transclude: true
  };

  angular.module("app").
    directive("myPage", function() { return myPage; });

and finally, to instantiate the directive one needs to write (see angularjs-api/template/sample.html):

  

    My content
  
  

    File
    Edit
    View
  

The working sample can be seen through rawgit: sample.html

See also: Multisite Transclusion in AngularJS