标签: transclusion

我不能进行嵌套的翻译工作.

有两个指令,这两个指令都声明它们将转换它们的内容.当我嵌套它们时,内部没有任何内容.

下面是这个小提琴,演示我的问题.

这是代码:

function Ctrl($scope) {
  $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}

angular.module('transclude', [])
 .directive('outer', function(){
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {},
      template: '<div style="border: 1px solid black;">' +
                '<div>Outer</div>' +
                '<inner ng-transclude></inner>' +
                '</div>'
    };
 }).directive('inner', function(){
     return {
         restrict: 'E',
         transclude: true,
         replace: true,
         template :'<div style="border: 1px solid red;">' +
                   '<div>Inner</div>' +
                   '<div ng-transclude></div>' +
                   '</div>'
     };
 });

我有一个carousel指令,其中包含一些块,用于将传入的数组映射items到元素结构数组的数组中,然后生成类似于以下伪代码的标记:

<array of arrays>

  <array of items>
    <item>
    <item>
  </array of items>

  <array of items>
    <item>
    <item>
  </array of items>

</array of arrays>

这个角度模板如下所示:

<div class="carousel__content" ng-style="carousel.containerWidth">
  <ul class="carousel__chunk" ng-repeat="chunk in carousel.chunks" ng-style="carousel.chunkWidth">
    <li class="carousel__item" ng-repeat="item in chunk" ng-style="carousel.itemWidth">
      <div class="carousel__item-content">

        [element should be transcluded into this spot.]

      </div>
    </li>
  </ul>
</div>

鉴于我的观看代码:

<!-- The <a> tag should appear inside the 'carousel.html' template's ng-repeat list. -->
<carousel items="items" config="config">
  <a href="#">{{ item.name }}</a>
</carousel>

我希望transcluded元素绑定到item最深的对象ng-repeat …

我真的很感激我在开发一个transcluded isolated指令时遇到的这个范围问题的理解,其中在模板内部重复了转换.

我保证我已经理解了隔离和隔离范围的工作方式,并且我已经在网上搜索了答案.:)

我在这里发现的是,当不使用重复时,我的transcluded html可以访问父作用域(正如我预期的那样,因为被转换的作用域是父作用域的兄弟).

但是,当我更改模板以重复转换时,转换的html将无法再访问父作用域.

我确信这是有充分理由的,但对于我的生活,我不能把手指放在上面.

请在这里查看一个示例plunker - 它将解释我所指的更好,而不是单词可以.

我有一个列表组件,只显示名称.list组件应该能够获取由用户提供的自定义模板.

列表组件

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-list>
   <div>{{i.name}}-{{i.age}}</div> //user should be able to provide custom template like this
</my-list>

我尝试使用ng-content,但它会引发错误.在角度1同样的事情用于处理被抄除的内容.我们在角度2中有任何替代的手动转换,如果没有,那么我们如何在angular2中实现此功能.

这是普兰克

如何在Angular中进行插槽转换而不包括包装标签？

例如:

这是带选择器的组件模板my-component:

<div class="my-component">
   <p class="some sensitive css-classes">
       <ng-content select="sub-header"></ng-content>
   </p>

   <p class="more sensitive css-classes">
       <ng-content select="sub-footer"></ng-content>
   </p>
</div>

这是用数据填充模板的组件之一

<my-component>
    <sub-header>
        Very <strong>important</strong> text with tags.
    </sub-header>

    <sub-footer>
        More <em>important</em> text with tags.
    </sub-footer>
</my-component>

转换结果如下:

<div class="my-component">
   <p class="some sensitive css-classes">
       <sub-header>
          Very <strong>important</strong> text with tags.
       </sub-header>
   </p>

   <p class="more sensitive css-classes">
       <sub-footer>
           More <em>important</em> text with tags.
       </sub-footer>
   </p>
</div>

由于语义和非常敏感的CSS样式,这不是很有用

如何进行如下所示的转换:

<div class="my-component">
   <p class="some sensitive css-classes">
       Very <strong>important</strong> text with tags. …

我正在构建一个步进器并使用“嵌入”ng-content来动态抓取section步进器标签内的元素。stepper.component 视图的工作方式如下：

<ng-content select=".one"></ng-content>
<ng-content select=".two"></ng-content>
<ng-content select=".three"></ng-content>

组件用法如下所示：

<stepper>
    <section class="one">content here<section>
    <section class="two">content here<section>
    <section class="three">content here<section>
</stepper>

但是，我想通过自动识别部分元素来使其动态化：

<ng-content *ngFor="let section of sections; index as i;" select="['section:nth-child(' + i + ')']"></ng-content>

我怎样才能：

1. 获取可用于嵌入的节元素的节点列表？
2. 使用 ng-contentselect以增量方式定位它们？

我最近遇到了指令的转换,这个概念的目的是什么.据我所知,它封装了一个对象并且可能具有双向绑定.但是这可以通过在指令的scope属性中使用'='来实现.那么关于指令的重大事项是什么？

使用 Angular 2/4，我有一个复杂的页面模板。

假设我有 3 个相互嵌套的组件：page.component, 里面header.component和里面header.title.component有适当设置的自定义选择器。

page.component html模板：

<layout-header></layout-header>
...

header.component html模板：

<section class="dynamic-content" *ngIf="!collapsed" #dynamicContent>
  <layout-header-title></layout-header-title>
  ...
</section>

header.title.component html模板：

<ng-content selector="card-layout-title"></ng-content>

然后，在我的实际页面模板上：

<layout-page>
  <card-layout-title>Title goes here</card-layout-title>
</layout-page>

在ng-content selector="card-layout-title"只有当直接父是在标签内的组件选择，即从工作header.title.component，我无法选择2的水平式的嵌套组件找到内容transclude成card-layout-title。

我该怎么做（最好不要在每个级别添加和传递模板引用，因为每个级别有 5-10 个嵌套组件）？

聚合物中有类似angularjs指令的transclude属性吗？什么允许我将一些元素包含在模板中的特定位置？

我想实现以下内容:

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

可能表达的意思是:

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

我不确定这是否是聚合物的任务,或者这是否是使用聚合物的典型方法.我问,因为我开始喜欢聚合物,我想保持惯用思维.

在 angular2 组件中使用嵌入时，我的“ViewChildren”似乎无法检测到这些组件。当我制作一个直接定义相同组件的组件时，它可以正常工作。现在有人有办法获得这项工作吗？

我有一种情况,我必须创建一个带有一些花里胡哨的容器指令..然后我有一个可以包装到该容器指令中的指令列表.

像这样的东西:

<the-container foo="bell" bar="whistle">

    <some-directive></some-directive>

</the-container>


<the-container foo="potato" bar="tomato">

    <some-other-directive></some-other-directive>

</the-container>

有没有什么办法中,我可以<some-directive>和<some-other-directive>认识的foo和/或bar属性,它们在transcluded指令的价值观？

基本的theContainer指令

.directive("theContainer", function() {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        scope: true,
        templateUrl: "theContainer.html",
        compile: function(element, attrs) {
            return function(scope, element, attrs) {
                scope.containerAttrs = {
                    foo: attrs.foo,
                    bar: attrs.bar
                };
            };
        }
    }
});

让我们假设这两个指令一起具有不同且无关的功能

someDirective

.directive("someDirective", function() {
    return {
        restrict: "E",
        scope: true,
        templateUrl: "someDirective.html",
        controller: function($scope, $element, $attrs) {},
        compile: function(element, attrs) { …

对不起,如果我在这里丢失了一些愚蠢的东西,但我真的尝试了各种组合来使这个代码工作,但没有运气.

我在学习directive中AngularjS,从Recipes with AngularJS而停留在这个码-

https://github.com/fdietz/recipes-with-angular-js-examples/tree/master/chapter3/recipe4

我相信它应该在Hello World文本之前打印Heading.但它不会来.让我知道我的代码中缺少的内容 - p

PLNKR代码

代码整体 -

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>Directive Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);

        myApp.directive("myWidget", function(){
            return {
                restrict: "E",
                transclude: true,
                template: "<div ng-transclude><h3>Heading</h3></div>"
            };
        });
    </script>
</head>
<body>
    <my-widget>
        <p>Hello World!!</p>
    </my-widget>
</body>
</html>

我想以ng-content简单的字符串形式获取组件的innerText 以便能够重用它。

我尝试过这样的事情：

@Component({
  selector: 'my-comp',
  template: `
    <div class="text-container">
      <span class="text" [title]="text">{{text}}</span>
    </div>
    <ng-template #text>
      <ng-content></ng-content>
    </ng-template>
  `
})
export class MyComponent implements AfterViewInit {
  @ViewChild('text') text: TemplateRef<string>;

  ngAfterViewInit(): void {
    console.log(this.text);
  }
}

我这样使用它：

<my-com>
  My simple string text
</my-com>

目的是让我的字符串My simple string text进入变量text...

有什么想法吗？