传递 $index 作为 $emit 的参数会中断函数答案

【问题标题】：Passing $index as argument of $emit breaks function传递 $index 作为 $emit 的参数会中断函数
【发布时间】：2021-06-09 00:54:21
【问题描述】：

我有一个论坛主题列表（主题），当用户将鼠标悬停在每个主题上时，我希望它的元数据显示在单独的面板中，以确定选择了哪个主题我试图将 $index 作为$emit 的参数，但这似乎破坏了功能。

查看：

<header ng-include="includes.header.src"></header>
<div id="content-wrapper">
    <div ng-include="includes.threadList.src" id="content-left"></div>
    <div id="content-divider"></div>
    <div ng-include="includes.threadDetails.src" id="content-right"></div>
</div>

threadList 包含（出现问题的地方）：

<ul id="threadList">
    <li ng-repeat="thread in threadList | filter:includes.header.searchQuery" ng-mouseover="$emit('updateThreadDetails', {{$index}})">  
        <a href="/#/threads" ng-click="">
        {{thread.title}}, moused over {{count}} times. This is item {{$index}}
        </a>
    </li>
</ul>

线程详情包括：

<h3>{{includes.threadDetails.title}}</h3>

控制器：

function threadListCtrl($scope){
    $scope.count = 0;
    $scope.$on('updateThreadDetails', function(event,index) {
        $scope.count++;
        $scope.includes.threadDetails.title = index;    //$scope.threadList[index].title;
    });
    
    $scope.threadList = [
        {title: 'I like horse'},
        {title: 'I like turtle'},
        {title: 'I like actor'}
    ];
}

通过ng-mouseover="$emit('updateThreadDetails', 'myString')" 传递刺痛按预期工作（includes.threadDetails.title 变为'myString'）。这是来自 threadList 的健康示例文本：

I like horse, moused over 26 times. This is item 0
I like turtle, moused over 26 times. This is item 1
I like actor, moused over 26 times. This is item 2

当{{$index}} 被传递时，输出变得不正常，在'moused over x times' 中，x 始终为 0，线程细节保持不变。作为一种解决方法，我尝试预先设置{{$index}}，因此我只是传递了一个原语，尽管这不起作用：

ng-mouseover="index = '{{$index}}'; $emit('updateThreadDetails', index)"

【问题讨论】：

你是说ng-mouseover="index = $index; $emit('updateThreadDetails', $index)"吗？由于您处于角度指令{{}} 中，因此不需要分隔符。
我做到了，效果很好。

标签： javascript angularjs dom-events angularjs-ng-repeat parameter-passing

【解决方案1】：

在传递给 ngMouseOver 的表达式中不需要数据绑定（来自双花括号），因为 Angular 已经期望将其作为 Angular 表达式处理（使用 $interpolate）。所以你可以直接使用变量$index，像这样：

ng-mouseover="$emit('updateThreadDetails', $index)"

另外，我假设您还想单独更新每个项目的计数。所以也许你更喜欢：

$scope.count[index]++;

像这样在你的 html 中显示它：

moused over {{count[$index]}}

demo fiddle

【讨论】：