Question

是不是我无法自定义角度分量（角度1.5）的转换？我想解决的任务是使用transclusion将模板传递给组件，并使其能够使用“组件内”变量。像这样：

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

将项目放入my-items-component文档中，并用于自定义组件内的项目表示。

我能够使用transcludeFn函数对指令执行此操作，但似乎没有传递给$ postLink组件钩子的参数。

那么，我应该使用指令还是另一种方法？

Answer 1

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

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

Answer 2

我找到了答案。

Access $scope of Component within Transclusion in AngularJS 1.5

这可以解决我的问题。我的例子：

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

然后在我的组件中，我有了“名称”。希望对您有帮助。

Answer 3

有两种解决问题的方法

将所有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>

在角度分量中使用transcludeFn

3 个答案: