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循環內不工作

回答

相關問題