I'm having trouble figuring out how to add mouse over/leave events to a span tag (child) of li.
Here is my HTML file:
<div ng-controller="SliderCtrl">
<div class="left-panel">
...
</div>
<div class="right-panel">
<gh-visualization val="data"></gh-visualization>
<div class="chart">
<svg class="chart"></svg>
</div>
<div class="table">
<ul>
<li ng-repeat="chart in charts">
<div class="mark" style="background-color:{{colors[$index]}}"></div>
<div class="asset"><span ng-mouseenter="showTooltip({{$index}})" hover-element>{{chart.asset_class}}</span></div>
<div class="investment">{{chart.investment_fund}}</div>
<div class="weight">{{chart.weight}}</div>
</li>
</ul>
</div>
</div>
</div>
This is my JS file:
var app = angular.module('MyApp', ["ngResource"]);
app.factory("Chart", function($resource) {
...
});
app.controller('SliderCtrl', function($scope, Chart) {
...
$scope.showTooltip = function(index) {
$scope.temp = index;
}
});
app.directive('ghVisualization', function () {
return {
restrict: 'AE',
scope: {
val: '=',
charts: '='
},
link: function (scope, element, attrs) {
...
scope.showTooltip = function(index) {
var temp = index;
}
}
}
});
app.directive('hoverElement', function () {
return {
restrict: 'AE',
scope: {
},
link: function (scope, element, attrs) {
element.bind("mouseover", function(e){
element.addClass('unfill').removeClass('filled');
});
element.bind("mouseout", function(e){
element.addClass('filled').removeClass('unfill');
});
}
}
});
Let me provide some context about my code:
The SliderCtrl controller and ghVisualization directive are already set up. What I'm attempting to do is apply mouse over/leave events to the nested span tag within li for specific actions.
Initially, I added ng-mouseenter="showTooltip({{$index}})" to the span and defined the showTooltip function in the controller (but it wasn't called). I also tried implementing it within the directive, but with no success.
To address this issue, I created a new directive named hoverElement and linked it to the span, yet it still didn't work as intended.
If anyone can point out what might be wrong with my approach and provide guidance on how to properly execute this task in AngularJS, I would greatly appreciate it.
Thank you in advance!