-1
内部で動作していない私は、順不同リストの内側にリスト項目を表示する角度NGリピートを持っています。各リスト項目内には、サブ項目の順序付けられていない別のリストがあります。各サブ項目<li>の中には、名前を表示するdivと値を格納するdivがあります。NG-MouseEnterイベントとNG-mouseleaveはNGリピートループ
私は、値のdivにNG-MouseEnterイベントとNG-mouseleave属性をフックアップしようとしていますが、彼らは発射されていません。ディレクティブ内で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
はちょうどこれがあなたのコントローラ
$scope.mouseEnter = function(){
console.log("enter");
};
$scope.mouseLeave = function(){
console.log("leave");
};
および変更するには、この機能を追加変更機能するように、これらの関数を作成する必要がある理由
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
}
]
}
];
}]);