Question

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

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

我没有页面加载错误，页面上的所有内容都显示正常，因此角度设置正确，只是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

axis和ng-mouseenter在您的代码中工作正常，只是您无法直接在html中调用console.log，您在html模板中使用的函数必须在您的代码中定义控制器，尝试将console.log移动到控制器应解决问题。

的index.html

ng-mouseleave

控制器：

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

Answer 2

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

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

2 个答案: