Passing $index as argument of $emit breaks function

Issue

I have a list of forum threads (topics), when the user mouses over each one I want it’s metadata to be displayed in a separate panel, to identify which thread is selected I’m trying to pass $index as a parameter of $emit but this seems to break the function.

View:

<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 include(where problem is occuring):

<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>

threadDetails include:

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

Controller:

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'}
    ];
}

Passing a sting via ng-mouseover="$emit('updateThreadDetails', 'myString')" works as expected(includes.threadDetails.title becomes 'myString'). Here’s the healthy sample text from 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

When {{$index}} is passed the output becomes ill and in 'moused over x times' x is always 0 and the thread details remain unchanged. As a workaround I tried pre-setting {{$index}} so I was just passing a primitive thusly though this didn’t work:

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

Solution

You don’t need data binding (from the double curly braces) in the expression you pass to ngMouseOver as Angular already expects to process it as an Angular expression (with $interpolate). So you can use the variable $index directly, like so:

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

Also, I’m assuming you also want to update the count for each item, individually. So perhaps you would prefer:

$scope.count[index]++;

Displaying it in your html like this:

moused over {{count[$index]}}

demo fiddle

Answered By – KayakDave

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0