在angular中创建自定义鼠标悬停并将$ event传递给指令控制器

Question

我收到一个错误：

TypeError: Cannot read property 'x' of undefined

这是我的指令tooltip ：

.directive('tooltip', function() {
return {
    restrict: 'A',
    controller: function($scope) {
      $scope.enter = function(evt) {
          console.log('x: ' + evt.x + ', y: ' + evt.y);
      };
    },
    link: function(scope, element, attrs) {
      element.bind("mouseenter", function() {
        scope.$apply(attrs.tooltip);
      });

    }
}

}）;

HTML：

<svg>
  <g pathing tooltip="enter($event)">
   ...
  </g>
</svg>

Answer 1

您没有将mouseenter事件传递给该函数。

这应该工作

element.bind("mouseenter", function(event) {
    scope.$apply(function(){
         attrs.tooltip(event);
     });
  });

不知道为什么不只使用范围调用：

$scope.enter(event) 

Answer 2

通过attrs.tooltip传递的函数不能像这样直接调用。

您必须使用$parse服务来调用如下函数：

.directive('tooltip', function($parse) {
  return {
    restrict: 'A',
    controller: function($scope) {
      $scope.enter = function(evt) {
        console.log('x: ' + evt.x + ', y: ' + evt.y);
      };
    },
    link: function(scope, element, attrs) {
      var fn = $parse(attrs.tooltip);
      element.bind("mouseenter", function(event) {
        fn(scope, { $event: event });
      });
    }
  };
});

但是，甚至比这更好的是，为什么不使用ng-mouseover指令呢？

<g pathing ng-mouseover="enter($event)">
...
</g>

示例： http ： //plnkr.co/edit/hh0OCDWsRhYWcyhjvGiD？p = preview