如何用AngularJS获取SVG图像的path id？现有代码失效求建议

我来帮你梳理下当前代码的问题和可行的解决方案：

• 补全代码的语法缺陷
  你写的addEventListener('click'明显没写完，完整的点击事件绑定应该是这样的，这样才能拿到点击路径的ID：

  p[i].addEventListener('click', function() {
      console.log('当前点击的Path ID:', this.id);
  });
  

• 适配AngularJS的DOM操作时机
  你直接用原生JS获取<object>元素绑定事件，很可能在Angular还没完成模板渲染的时候就执行了，导致找不到目标元素。AngularJS推荐用指令来处理DOM操作，这样能确保元素已经渲染完成：
  先定义一个指令：

  var app = angular.module("myApp", []);
  app.controller('uiCtrl', function($scope) {
      $scope.list1 = {img : '你的SVG地址'};
      $scope.selectedPathId = ''; // 用来存选中的Path ID
  });
  
  app.directive('svgLoader', function() {
      return {
          link: function(scope, element) {
              // 监听object的load事件，确保SVG加载完成
              element.on('load', function() {
                  var svgDoc = this.contentDocument;
                  var paths = svgDoc.querySelectorAll('path');
                  // 给每个path绑定点击事件
                  angular.forEach(paths, function(path) {
                      path.addEventListener('click', function() {
                          var pathId = this.id;
                          console.log('点击的Path ID:', pathId);
                          // 把ID同步到Angular的scope中（需要用$apply触发视图更新）
                          scope.$apply(function() {
                              scope.selectedPathId = pathId;
                          });
                      });
                  });
              });
          }
      };
  });
  

  然后在模板里使用这个指令：

  <div ng-app="myApp" ng-controller="uiCtrl">
      <object data="{{list1.img}}" svg-loader></object>
      <p>选中的Path ID: {{selectedPathId}}</p>
  </div>
  

• 注意跨域限制
  如果你的SVG文件和当前页面不在同一个域名下，浏览器的同源策略会阻止你访问contentDocument，这时候你需要把SVG文件放到和页面同域的服务器上，或者配置服务器允许跨域访问。

• 如果想用jQuery实现
  要是你习惯用jQuery，也可以这么写（但还是建议优先用Angular指令）：

  // 确保jQuery已引入，且在Angular渲染完成后执行
  app.controller('uiCtrl', function($scope, $timeout) {
      $scope.list1 = {img : '你的SVG地址'};
      $timeout(function() {
          $('object').on('load', function() {
              var $paths = $(this.contentDocument).find('path');
              $paths.on('click', function() {
                  console.log('点击的Path ID:', $(this).attr('id'));
              });
          });
      });
  });
  

内容的提问来源于stack exchange，提问作者Pratyush Pranjal