ng-mouseenter和ng-mouseleave在ng-repeat循环内不工作

-1

我有一个角度ng-repeat，它显示无序列表中的列表项。在每个列表项目中，我有另一个无序的子项目列表。在每个子项<li>中，我有一个div来显示一个名称和一个div来存储一个值。ng-mouseenter和ng-mouseleave在ng-repeat循环内不工作

我想将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 
     } 
     ] 
    } 
    ]; 
}]);

来源

2017-07-29 jros

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'); 
};

来源

2017-07-29 21:27:05

的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

来源

2017-07-29 21:15:39

ng-mouseenter和ng-mouseleave在ng-repeat循环内不工作

回答

相关问题