1

I would like to do something when a <li> element is hovered over. I thought that I could do it like this

$scope.$watch(function(){
    return  document.querySelectorAll("li:hover").length;
},
function(newVal, oldVal){
    console.log(newVal, oldVal);
});

based on a solution I found here. When the application loads, I see 0 0 in the console, which is what I'd expect. However when I hover over a <li> element, I expect to see 0 1. But I don't see anything. I think that selector is good because entering 

setInterval(function(){
   console.log( document.querySelectorAll("li:hover").length )
}, 500);

into the console will print 0 every half second until I hover over a <li> at which point, I'll see 1. How can I change my $scope.$watch to watch the length of this nodelist?

Community
  • 1
  • 1
1252748
  • 14,597
  • 32
  • 109
  • 229
  • 2
    can you use `ng-mouseover` https://docs.angularjs.org/api/ng/directive/ngMouseover ? – Ronnie Aug 24 '15 at 16:07
  • @Ronnie I was just experimenting with that actually, thanks! However, I'm still interested in why the `$watch` isn't watching.. – 1252748 Aug 24 '15 at 16:09

1 Answers1

2

In my learning Experience,

$scope.$watch only watch the scope objects and scope providers. It does not watch the Jquery with dom manipulation. One think you do it assign the jquery object it in the scope and watch the change may you can proceed the next level.

$scope.liLength = document.querySelectorAll("li:hover").length;

$scope.$watch(function($scope){
    return  $scope.liLength;
},
function(newVal, oldVal){
    console.log(newVal, oldVal);
});
Sudharsan S
  • 15,336
  • 3
  • 31
  • 49