Angularjs：将鼠标悬停/离开事件分配给li标签的子元素答案

【问题标题】：Angularjs: assign mouse over/leave events to a child element of li tagAngularjs：将鼠标悬停/离开事件分配给li标签的子元素
【发布时间】：2014-05-31 14:38:44
【问题描述】：

我正在尝试将鼠标悬停/离开事件分配给 li 的跨度标记（子），但不知道该怎么做。

HTML 文件：

<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>

JS 文件：

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

让我解释一下我的代码：

SliderCtrl 控制器和 ghVisualization 指令已经存在，我想要做的是将鼠标悬停/离开事件分配给 li 的 span 子标签以执行某些操作行动。

所以就像你看到的，起初我添加 ng-mouseenter="showTooltip({{$index}})" 到 span 并在控制器中定义了 showTooltip 函数（但没有调用，所以）和指示。（也不行）

这就是为什么我创建了一个名为 hoverElement 的新指令并将其分配给 span，但也不起作用。

我的代码有什么问题，如何正确实现？我是 AngularJS 的新手，希望大家多多帮助。

提前致谢！

【问题讨论】：

标签： javascript angularjs mouseevent mouseover

【解决方案1】：

要将范围属性作为参数传递给事件处理函数（使用ng-_eventtype_ 注册），您不需要插值（{{}}）。

ng-mouseenter="showTooltip($index)"

hoverElement 指令 seems OK 不过。

【讨论】：

【解决方案2】：

我认为你的问题是你的 ng-mouseenter 应该是这样的

ng-mouseenter="showTooltip($index)"

而不是这个

ng-mouseenter="showTooltip({{$index}})"

Plunker

【讨论】：