在角度组件中使用 transcludeFn

Posted 2023-02-22

【中文标题】在角度组件中使用 transcludeFn

【英文标题】：Using transcludeFn in angular components

【发布时间】：2017-01-22 06:55:10

【问题描述】：

是真的，我不能自定义角度组件中的嵌入（角度 1.5）吗？我要解决的任务是使用嵌入将模板传递给组件，并使其能够使用“组件内”变量。像这样：

<my-items-component items="$ctrl.items">
    <div>::item.description</div>
</my-items-component>

项目应该放在 my-items-component 文档中的位置，并用于自定义组件内的项目呈现。

我可以通过指令使用 transcludeFn 函数来做到这一点，但似乎没有传递给 $postLink 组件挂钩的参数。

那么，我应该为此使用指令还是有其他方法？

【参考方案1】：

我找到了答案。

Access $scope of Component within Transclusion in AngularJS 1.5

这解决了我的问题。我的例子：

<my-custom-component>
  <input model="$parent.$ctrl.name">
</my-custom-component>

然后在我的组件中现在我有了“名称”。我希望这对你有所帮助。

【参考方案2】：

有两种方法可以解决您的问题

将我们所有的 html 放在组件模板定义中

app.component('myItemComponent', new myItemComponentConfig());
 function myItemComponentConfig() 
 this.controller = componentController;
 this.template = '<div>::item.description</div>',
 this.bindings = 
    this.bindings = 
       items:'<'
     
  ;
 this.require = ;

像这样使用它：

 <my-items-component items="$ctrl.items"></my-items-component>

2.使用 Ng-transclude 加载组件的子 HTML

app.component('myItemComponent', new myItemComponentConfig());
         function myItemComponentConfig() 
         this.controller = componentController;
         this.template = '<div></div>',
         this.bindings = 
           items:'<'
         ;
         this.require = ;
         this.transclude:true;
        

像这样使用它：

<my-items-component items="$ctrl.items">
    <div>::item.description</div>
</my-items-component>

【参考方案3】：

要在 AngularJS 1.5 组件中使用 tansclusion，您首先需要使用 transclude: true 在组件中启用 tarnsclusion，然后在组件模板中使用 <ng-transclude></ng-transclude>。

我已经创建了一个示例笔作为示例http://codepen.io/fadihania/pen/bwpdPq

【讨论】：

我知道了，如何使用嵌入。我需要使用自定义嵌入（将嵌入的内容绑定到另一个范围）。我之前在指令链接函数中使用了transcludeFn。

安装一个 jsbin 或者使用 transcludeFn 试试怎么样？