AngularJS - 嵌套组件回调没有使其通过组件工厂

Posted 2023-02-23

【中文标题】AngularJS - 嵌套组件回调没有使其通过组件工厂

【英文标题】：AngularJS - nested component callback not making it past a component factory

【发布时间】：2018-09-27 07:16:29

【问题描述】：

我正在使用 Ionic 1.3.5 和 AngularJS 1.5.3 编写应用程序。

我有嵌套组件和一个组件工厂，它决定渲染哪个子组件。

一个子类型有一个 onClick 回调，我试图将其传播给父级。我不断收到此错误：Cannot use 'in' operator to search '$ctrl' in Today

这是我的工厂：

<clickable-list
    ng-if="$ctrl.type === 'clickableList'"
    on-click="$ctrl.onClick(value)"
    answer="$ctrl.answer">
</clickable-list>

<plain-text-answer
    ng-if="$ctrl.type === 'plainText'"
    answer="$ctrl.answer">
</plain-text-answer>

我能够修复我的 Plunker，使其运行并重现错误：http://plnkr.co/edit/ESTMPRRpdRuks6AJdRxv

【参考方案1】：

首先，您的 plunker 不起作用，因为您必须有空格：

template: ['<component', 'value="1">', '</component>'] 

结果为 html <componentvalue="1"></component>

其次，你的问题是你如何链调用传递value。要使其在没有其他方法的情况下工作，您需要：

一个组件

<c1 ng-click="$ctrl.onClick(value: value)">

两个组件

<c1 on-click="$ctrl.onClick(value: value)">
<c2 ng-click="$ctrl.onClick(value: value: value)">

...

由于这有点迟钝，最好创建中间方法：

c1: (onClick: '&')
vm.doClick = (value) => 
  vm.onClick(value: value);

那么你就有了 c1 的精美 html：<c2 ng-click="$ctrl.doClick(value: value)">

http://plnkr.co/edit/27cCqsnACtdIz00PfI3E?p=preview 正确插入

【讨论】：

这行得通，但在我的真实代码库中，我需要再上几级......我不明白为什么需要多次包装它或使用中间方法。