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

Question

我正在使用 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

Answer 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 正确插入