javascript - $scope.$watch 函数未按预期触发 nodelist.length 更改

Question

我想在 <li> 时做点什么元素悬停在上方。我以为我可以这样做

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

基于我找到的解决方案 here .当应用程序加载时，我看到 0 0在控制台中，这是我所期望的。然而，当我将鼠标悬停在 <li> 上时元素，我希望看到 0 1 .但我什么也没看到。我认为选择器很好，因为输入

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

进入控制台会打印0每半秒一次，直到我将鼠标悬停在 <li> 上到那时，我会看到 1 .如何更改我的 $scope.$watch查看此节点列表的长度？

Answer 1

在我的学习经历中，

$scope.$watch 只监视作用域对象和作用域提供者。它不会使用 dom 操作来观察 Jquery。有人认为你这样做是在范围内分配 jquery 对象并观察变化，你可以继续下一个级别。

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

$scope.$watch(function($scope){
    return  $scope.liLength;
},
function(newVal, oldVal){
    console.log(newVal, oldVal);
});