transclusion

In AngularJS I am using a bootstrapUI accordion directive that contains a nested accordion in one of the panes. When I close the 'parent' I would like to close its 'children'. I am having trouble because the accordion directive uses transclusion, and the scopes are actually siblings not parent to child. <div ng-controller="AccordionDemoCtrl"> <accordion close-others="oneAtATime"> <accordion-group heading="Static Header"> This content is straight in the template. </accordion-group> <accordion-group heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} </accordion-group>

In Angular 2 I want to put something line ng-content into ngFor inside of my component. But the problem is I need to pass some data ito the transcluded element. I found following solution for AgularJS: http://plnkr.co/edit/aZKFqPJmPlfTVRffB0Cc?p=preview .directive("foo", function($compile){ return { scope: {}, transclude: true, link: function(scope, element, attrs, ctrls, transclude){ scope.items = [1, 2, 3, 4]; var template = '<h1>I am foo</h1>\ <div ng-repeat="$item in items">\ <placeholder></placeholder>\ </div>'; var templateEl = angular.element(template); transclude(scope, function

I am trying to achieve something like this: I have a model class called ObjectTypeA , ObjectTypeB and ObjectTypeC . There is also a factory ComponentFactory , which based on the type of object passed in will create different components: ComponentFactory.ts export interface ComponentFactoryInterface { static CreateComponent(obj: CommonSuperObject) } @Injectable() export class ComponentFactory { public static CreateComponent(obj: CommonSuperObject){ if (obj instanceof ObjectTypeA){ return ObjectComponentA() }else if (obj instanceof ObjectTypeB){ return ObjectComponentB() } } } In the template I

In AngularJS 1.5, I want to pass a binding from a component into the (multi-slot) transcluded scope - for a reference in the template (in either one specific or all of them - no either way is fine). This is for creating a generic custom-select list // Component .component('mySelect', { bind: { collection: '<' }, transclude:{ header: 'mySelectHeader', item: 'mySelectItem' }, templateUrl: 'my-select-template', controller: function(){ ..... } }); ... // Component template <script id="my-select-template" type="text/ng-template"> <ol> <li ng-transclude="header"> </li> <li ng-transclude="item" ng

I have recently come across transclusion in directives, what is the purpose of having this concept. As far as I know its encapsulation of an object and have 2-way binding possibly. But this can be possible by using '=' in the scope attribute in directive. So whats the big deal about directive? Transclude allows : To create directives that wrap other elements. To clone the same transcluded contents multiple times. To re-clone the trancluded contents when an event occurs. ngTransclude and $transclude When using the transclude option, the element contents are being removed from the DOM during the

I'm pretty new in angular2 and I'm trying to make a small angular component called " grid " that simply rearranges its content using transclusion. Its template grid component template (grid.component.ts) <div class="grid"> <div class="row"> <div class="col-xs-4"> <ng-content select="[grid-item-index=0]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=1]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=2]"></ng-content> </div> </div> <div class="row"> <div class="col-xs-4"> <ng-content select="[grid-item-index=3]"></ng-content> <

Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template? I would like to achieve something like following: <my-header title="My title"> <my-header-item name="Item 1"></my-header-item> <my-header-item name="Item 2"></my-header-item> </my-header> which might be expressed: <h1>My title</h1> <!-- "My title" given by my-header's title attribute --> <ul> <li>Item 1 <!-- given by my-header-item --> <li>Item 2 </ul> I am not sure if this is a task for polymer or if this is a typical way to use