Angular 1.5：在 ngRepeat 中调用组件的方法答案

【问题标题】：Angular 1.5: calling a method of a component inside ngRepeatAngular 1.5：在 ngRepeat 中调用组件的方法
【发布时间】：2017-07-27 19:24:27
【问题描述】：

我在嵌套循环中有一个名为 suggest 的组件：

<div ng-repeat="phrase in model.phrases track by $index">
    <div ng-repeat="word in phrase.words track by $index">
        <suggest phrase-index="$parent.$index" word-index="$index"></suggest>
    </div>
</div>

我需要从根范围操作组件的数据。最好的方法是什么？

我的主要问题是通过短语索引和单词索引找到正确的组件实例。虽然通常我会写 $('suggest[phrase-index="0"]') 之类的东西，但在这种情况下它不起作用，因为属性值仍然是 "$parent.$index"。

另一个不清楚的部分是在我找到组件后调用它的方法。现在我正在使用 $(element).children().scope() 来获取范围引用并在其上调用一个方法，但是文档说 scope() 应该只用于调试。有什么更好的方法？

有可能我也这样做了$-y，还有更好的方法。我只是不想过度设计这个，让多个组件/服务忙于在层之间传递方法调用。

【问题讨论】：

能否提供更多xode示例，如何调用方法，使用jquery吗？
“我只是不想过度设计这个，让多个组件/服务忙于在层之间传递方法调用”——为什么要使用 Angular？为什么你使用组件？继续使用一个 html 和一个控制器 - 你不会有任何“过度工程”的问题
@Fribu 通常我会遍历所有建议组件并在每个组件上调用一个方法。
@PetrAveryanov 如果您知道可以解决我的问题的解决方案，请分享。通过过度设计，我的意思是通过形式参数使其看起来“正确”，但比将所有内容都放在一个文件中更难维护。

标签： angularjs components

【解决方案1】：

您可以在 $rootScope 上发出一个事件，并在组件控制器中定义的事件列表器中调用组件方法。

在您的应用程序中某处发出带有所需组件实例索引值的事件：

$rootScope.$emit('suggestEvent', someIndexValue);

如果phrase-index 等于在事件中传递的索引值，则在您的组件控制器中定义事件侦听器调用组件方法：

 //inside suggest component controller
 $rootScope.$on('suggestEvent', function(index) {
       //call component method if 'index' value is equal to  component `phrase-index`
      if (this.phraseIndex === index) {
          this.someMethod();
      }
 })

【讨论】：