ng-mouseenter 和 ng-mouseleave 在 ng-repeat 循环中不起作用

Question

我有一个 angular ng-repeat，它显示无序列表中的列表项。在每个列表项中，我还有另一个无序列表的子项。在每个子项 <li> 中，我有一个 div 来显示名称和一个 div 来存储一个值。

我正在尝试将 ng-mouseenter 和 ng-mouseleave 属性连接到值 div，但它们没有触发。即使只是尝试在指令中执行 console.log 语句也不会向控制台打印任何内容。

我没有页面加载错误，页面上显示的一切都很好，所以 angular 设置正确，只是 ng-mouseenter 和 ng-mouseleave 没有触发。

我需要做什么才能让 ng-mouseenter 和 ng-mouseleave 正确触发？

index.html

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
    <script src="js/app.js"></script>
    <script src="js/SkillsetController.js"></script>
</head>
<body ng-app="mainApp">
    <div id="skillset" ng-controller="SkillsetController">
        <h2>{{title}}</h2>
        <div class="skillListContainer" id="skillListContainer">
            <ul class="skillCategoriesList">
                <li class="skillCategory" ng-repeat="category in skillsetCategories">
                    <h3>{{category.title}}</h3>
                    <ul class="skillsList">
                        <li class="skill" ng-repeat="skill in category.skills">
                            <div class="skillName">
                                <span>{{skill.name}}</span>
                            </div>
                            <div class="skill-value" data-skill-value="{{skill.level}}" 
                                ng-mouseenter="console.log('enter');" 
                                ng-mouseleave="console.log('leave');">
                                {{skill.level}}
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

app.js

var app = angular.module("mainApp", []);

SkillsetController.js

app.controller("SkillsetController", ["$scope", function ($scope) {
  $scope.title = "Skillset";
  $scope.skillsetCategories = [
    {
      "title": "Backend",
      "skills": [
        {
          "name": "Java",
          "level": 10
        }
      ]
    },
    {
      "title": "Frontend",
      "skills": [
        {
          "name": "HTML",
          "level": 9
        }
      ]
    },
    {
      "title": "Frameworks",
      "skills": [
        {
          "name": "jQuery",
          "level": 9
        }
      ]
    },
    {
      "title": "Databases",
      "skills": [
        {
          "name": "MySQL",
          "level": 10
        }
      ]
    }
  ];
}]);

Answer 1

console.log() 直接在 html 中无效这就是为什么您需要创建这些功能才能工作的原因

只需更改此功能即可将此功能添加到您的控制器

  $scope.mouseEnter = function(){
    console.log("enter");
  };

  $scope.mouseLeave = function(){
    console.log("leave");
  };

并在 html

中更改此设置

<div class="skill-value" data-skill-value="{{skill.level}}" 
                            ng-mouseenter="mouseEnter()" 
                            ng-mouseleave="mouseLeave()">
                            {{skill.level}}
 </div>

这是一个example

Answer 2

ng-mouseenter 和 ng-mouseleave 在您的代码中工作得很好，只是您不能直接在 html 中调用 console.log，您在 html 模板必须在您的控制器中定义，尝试将 console.log 移动到您的控制器应该可以解决问题。

index.html

<div class="skill-value" data-skill-value="{{skill.level}}"
  ng-mouseenter="mouseEnter()"
  ng-mouseleave="mouseLeave()">
  {{skill.level}}
</div>

控制器：

$scope.mouseEnter = function(){
  console.log('enter');
};
$scope.mouseLeave = function(){
  console.log('leave');
};

ng-mouseenter 和 ng-mouseleave 在 ng-repeat 循环中不起作用

ng-mouseenter and ng-mouseleave not working inside an ng-repeat loop

html

javascript

events

angularjs

angular-directive