transclusion

问题 I have a list component which shows only names. list component should be able to take custom template which will be given by user. List Component import {Component } from 'angular2/core'; @Component({ selector: 'my-list', template: `<p>This is List</p> <ul> <li *ngFor="#i of data"><div class='listItem'>{{i.name}}</div></li> </ul>` }) export class MyList implements OnInit{ data: Array<any> = [{name: 'John', age: 26},{name: 'Kevin', age: 26}, {name:'Simmons', age:26}]; } My Requirement <my-list

问题 Is it possible to transclude one HTML element into multiple locations of a document, as it is in MediaWiki? I want to include elements inside other elements, without copying and pasting their content. I know that it's possible to embed web pages inside other web pages using iframes, but is there any reliable way to embed HTML elements inside other HTML elements, on the same page? <p id = "p1">This is paragraph 1. </p> <p id = "p2"> This is paragraph 2. </p> <p id = "p3">This is paragraph 3.

问题 Hello I'm struggling while creating a generic confirmation directive based on angular-bootstrap Modal directive. I can't find a way to transclude my content in the ng-template used for the modal construction because the ng-transclude directive isn't evaluated since it's part of a ng-template loaded afterward when executing $modal.open() : index.html (directive insertion) : <confirm-popup is-open="openConfirmation" on-confirm="onPopupConfirmed()" on-cancel="onPopupCanceled()" > Are you sure ?

问题 I have created a tab view, with the following structure: <tabs> <ul #getVCRefHERE > <li>tab1</li> <li>tab2</li> </ul> <tab> <ng-content></ng-content> <!--screen for tab2 --> </tab> <tab> <ng-content></ng-content> <!--content for tab1 --> </tab> </tabs> I create each component: tabs,tab,and the component placed in the ng-content. place. The issue is when I insert at the end of the ViewContainer(it uses ul as it's anchor element) the sequential tabs are nest inside of the tab like this: <tabs>

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

问题 I have a very simple setup: <pane title="mytitle">Title in parent (transcluded): {{title}}</pane> and angular.module('transclude', []) .directive('pane', function(){ return { restrict: 'E', transclude: true, scope: { title:'@' }, template: '<div>' + '<div>Title in isolated scope: {{title}}</div>' + '<div ng-transclude></div>' + '</div>' }; }); The plunker is here: http://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku The transclusion itself is working but the {{title}} only gets replaced in the directive

问题 I want to create a wrapper directive that would serve as the frame for a notification widget in a list. In that frame I want to transclude later some specific content based on a property from the notif object. Currently I hard coded a div element. I have the following in index.cshtml: <div ng-controller="notificationCenterCtrl"> <ul> <li ng-repeat="notif in allNotifications"> <notification-base notification="notif" remove="removeNotification(notif)"> <div style="background-color: fuchsia">bla

问题 I'm trying to put ads on my angular.js app, and I've done some reading and discovered it isn't possible to just copy and paste the normal adsense code. I've heard you are supposed to "wrap it in a directive with a transclusion," and the only example I can find of this is another Stackoverflow post: AngularJs and AddThis social plugin Can someone help give guidance about how to go about doing this with Google Adsense? 回答1: you need to create a directive yourApp.directive('ads', function() {

问题 I have the following YAML: paths: patha: /path/to/root/a pathb: /path/to/root/b pathc: /path/to/root/c How can I "normalise" this, by removing /path/to/root/ from the three paths, and have it as its own setting, something like: paths: root: /path/to/root/ patha: *root* + a pathb: *root* + b pathc: *root* + c Obviously that's invalid, I just made it up. What's the real syntax? Can it be done? 回答1: I don't think it is possible. You can reuse "node" but not part of it. bill-to: &id001 given :

问题 I've been trying to make a tab view and thought content projection might be a good approach.I learned it from this article. I thought that I could make it dynamic by just inputting a given array of components, and they would be displayed as the page for the selected tab. Here is my attempt at doing this: @Component({ selector: 'my-app', template:` <h1>Experiments</h1> <button class="add-button" (click)="add()">Add</button>` }) export class App { components:Array<any> = [PrepSetupTab