transclusion

问题 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 -

问题 Here's some code : link I'm trying to create a directive that wraps its children in some boilerplate. But if the children have ng-if controlling their appearance, the "transclusion" doesn't work. Well it sort of does, but as you can see the ng-if logic is not getting passed through correctly. I'd like to know how to fix it, but also where (if anywhere) this is described in the Angular docs. 回答1: The problem is that Angular initially replaces ngIf with a comment that it uses to track where to

问题 I have a simple directive which repeats a section of transcluded content twice. Like this. link: function (scope, element, attrs, controller, transclude) { transclude(scope.$parent, function(clone) { element.find('[transclude-main]').replaceWith(clone); }); transclude(scope.$parent, function(clone) { element.find('[transclude-overflow]').replaceWith(clone); }); }); This works mainly as intended but if the content contains a form then I end up with two forms with the same name. More

问题 I've got three directives: aiOutter, aiMiddle, and aiInner. app.directive('aiOutter', function() { return { restrict: 'A', scope: { data: '=' }, template: '<div>Outter: {{data}}</div>', transclude: true, link: function(scope, elem, attrs) { console.log('outter recognized'); return console.log('outter data:', scope.data); } }; }).directive('aiMiddle', function() { return { restrict: 'A', scope: { data: '=' }, template: '<div>Middle: {{data}}</div>', transclude: true, link: function(scope, elem

问题 I created a "tessellate" directive that lets you wrap a number of divs. <tessellate columns="4"> <div class="thumbnail" ng-repeat="item in items track by item.id"> {{item.Name}}<br /> {{item.Summary}} </div> </tessellate> It takes one div at a time and appends it to the shortest of the specified number of columns to create a tessellation/mosaic effect. See the plunkr here: http://plnkr.co/edit/ur0bVCFRSz1UbRHeLjz8?p=preview The problem is that when the model changes, the ng-repeat uses the

问题 I'm curious if this is even possible in ember. This is an easy thing to do in angular ( plunkr: http://plnkr.co/edit/O2e0ukyXdKMs4FcgKGmX?p=preview ): The goal is to make an easy to use, generic, reusable accordion api for api consumers. The api I want the caller to be able to use is this (just like the angular api): {{#ember-accordion listOfAccordionPaneObjects=model}} {{#ember-accordion-heading}} heading template html {{accordionPaneObject.firstName}} {{/ember-accordion-heading}} {{#ember

问题 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

问题 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

问题 I have a bit of trouble creating a directive that wraps the element (and its children) that the directive is applied to. I don't get why this seemingly common scenario should be so difficult considering how easy many other commonplace things are in AngularJS, so it could very well be that I'm missing something here. What I want to do is to wrap a select element in a div. I'm using transclude to preserve the original select element and its content but I can't get it to work correctly. The HTML

问题 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