Passing $index as argument of $emit breaks function


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.


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

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

threadDetails include:



function threadListCtrl($scope){
    $scope.count = 0;
    $scope.$on('updateThreadDetails', function(event,index) {
        $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)"


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:


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

Leave a Reply

(*) Required, Your email will not be published