Question

我在svg中绘制了几个元素（使用ng-switch）并在它们上处理鼠标事件。控制器看起来像这样（有更多类型的元素和更多鼠标事件要处理）：

app.controller('MainCtrl', function($scope) {
  $scope.elements = [
    { "type": "circle", "x" : 100, "y" : 200 },
    { "type" : "rect", "x" : 50, "y" : 20 }
    ];

  $scope.mousedown = function(element, $event) {
    $scope.msg = element.type;  
  };
});

在鼠标事件处理程序中，我需要鼠标事件目标的模型。我目前的解决方案是向每个svg元素添加ng-mousedown="mousedown(element, $event)"，这对于越来越多的元素类型来说很烦人。

    <g ng-switch="p.type">
      <g ng-switch-when="circle">
        <circle ng-mousedown="mousedown(p, $event)"></circle>
      </g>
      <g ng-switch-when="rect">
        <rect ng-mousedown="mousedown(p, $event)"></rect>
      </g>
    </g>

有没有办法只将ng-mousedown添加到根svg元素，并从$event属性中检索所点击元素的模型（$event.target或$event.srcElement给我单击的svg元素，如何从中获取模型？）。

完整示例： http://plnkr.co/edit/nfgVSBBaeJ9EFKNjYEJn

Answer 1

是的，您可以按如下方式使用angular.element(...).scope().p：

标记：

<svg xmlns="http://www.w3.org/2000/svg" ng-mousedown="mousedown2($event)">

JS：

$scope.mousedown2 = function($event) {
    console.log(angular.element($event.target).scope().p);
});

参见forked plunk：http://plnkr.co/edit/7lGMphla42Chrg3X2NZl

Answer 2

由于element.scope()依赖于调试数据，因此它不是生产模式的解决方案。在更复杂的情况下，您必须编写一个指令来设置＆＃34;事件源＆＃34;如果事件冒泡，则可以由父元素上的另一个指令处理（参见下面的第二个示例）。

在这种特殊情况下，如果您将事件处理程序放在ng-repeat元素上，解决方案非常简单：

＆＃13;

angular.module("app", [])
	.controller('MainController', MainController);

function MainController() {
	var vm = this;
	vm.elements = [
    { "type": "circle", "x" : 100, "y" : 100 },
    { "type" : "rect", "x" : 50, "y" : 20 }];

  vm.mousedown = function(element, $event) {
    vm.msg = element.type;  
  };
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController as view">

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="120">
  <g ng-repeat="p in view.elements" ng-switch="p.type" 
     ng-mousedown="view.mousedown(p, $event)">

      <circle ng-switch-when="circle" 
              ng-attr-cx="{{p.x}}" ng-attr-cy="{{p.y}}" fill="red" r="20">
      </circle>
      <rect ng-switch-when="rect" 
            ng-attr-x="{{p.x}}" ng-attr-y="{{p.y}}" width="50" height="50" fill="blue" >
      </rect>

  </g>
</svg>
<p>
{{view.msg}}
</p>    
</div>

＆＃13;

更复杂的例子

此示例显示了两个指令eventSource和eventHandler的用法。 eventHandler侦听根元素上的事件。 eventSource注册＆＃34;事件来源＆＃34;在它的控制器上。

＆＃13;

angular.module("app", [])
  .controller('MainController', MainController)
  .directive('eventSource', eventSource)
  .directive('eventHandler', eventHandler);

function MainController() {
	var vm = this;
	vm.elements = [
    { "type": "circle", "x" : 100, "y" : 80 },
    { "type" : "rect", "x" : 50, "y" : 20 }
    ];
  vm.rect = { "type" : "special", "x" : 0, "y" : 40 };

  vm.handle = function(element, $event) {
    vm.msg = $event.type + ': ' + element.type;  
  };
}

function eventSource($parse) {
  return {
    restrict: 'A',
    require: '^eventHandler',
    link: function (scope, elem, attr, controller) {
      var sourceAttr = attr['eventSource'];
      var source = $parse(sourceAttr)(scope);
      controller.register(elem, source);
      scope.$on('$destroy', function () {
        controller.unregister(elem);
      });
    }
  };  
}

function eventHandler() {
  return {
    restrict: 'A',
    scope: {
      eventHandler: '&'
    },
    controller: function () {
      var vm = this;
      vm.sources = [];

      this.register = function (element, source) {
        vm.sources.push({element : element, source: source});
      }

      this.unregister = function (element) {
        var i = 0;
        for(var e = vm.sources.length; i < e; ++i) {
          if (vm.sources[i].element === element)
            break;
        }
        vm.sources.splice(i, 1);
      }
    },
    link: function (scope, elem, attr, controller) {

      elem.on('mousedown mouseup', function ($event) {

        var target = $event.target;
        while (target && !target.hasAttribute('event-source'))
          target = target.parentNode;
        
        for(var i = 0, e = controller.sources.length; i < e; ++i) {
          if (controller.sources[i].element[0] === target) {
              scope.eventHandler({element : controller.sources[i].source, $event : $event});
          }            
        }
        scope.$apply();
      });  
    }
  };
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as view">

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="120" 
     event-handler="view.handle(element, $event)">
  
  <g ng-repeat="p in view.elements" ng-switch="p.type" 
     event-source="p">
      <circle ng-switch-when="circle" 
              ng-attr-cx="{{p.x}}" ng-attr-cy="{{p.y}}" fill="red" r="20">
      </circle>
      <rect ng-switch-when="rect" 
            ng-attr-x="{{p.x}}" ng-attr-y="{{p.y}}" width="50" height="50" fill="blue" >
      </rect>
  </g>
  <rect ng-attr-x="{{view.rect.x}}" ng-attr-y="{{view.rect.y}}" width="80" height="50" fill="green"
        event-source="view.rect">
  </rect>
</svg>
<p>
{{view.msg}}
</p>    
</div>

＆＃13;

如何在AngularJS中检测鼠标事件的目标模型

2 个答案: