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

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

2 个答案: