javascript - 如何使用 Javascript/AngularJs 将按钮放置在图像上的特定位置(x，y)

Question

我有一个使用 angularJS 的元素，在我的元素中我有 2 张图片:

Image 1: <br/>

<img src="http://www.google.com/favicon.ico" alt="" ng-click="mark($event)" width="100"/>

<hr/>

Image 2: <br/>

<img src="http://www.google.com/favicon.ico" alt="" width="100"/>

当用户点击图像 1 时，我捕获图像的 x、y 位置。

$scope.mark= function(event){
    console.log("x = " + event.offsetX);
    console.log("y = " + event.offsetY);
}

得到一些像:

x = 123
y = 12

我需要使用 angularjs/javascript 在图像 1 的位置 (x, y) 上放置一个按钮，用户点击的位置(图像 1)。

两个图像相同。

我正在调查，但没有找到仅使用 angularjs 或 javascript 的解决方案。

任何建议。

Answer 1

@Eddy Howard 已经提出了原则。为了方便起见，您可以将功能放入指令中，可能是这样的(尽管这不是最佳解决方案):

.directive('posButton', function() {
   return {
    restrict: 'E',
    scope: {
      onClick: '=onClick',
      position: '=pos'
    },
    template: '<button ng-click="onClick()">foo</button>',
    link: function(scope, element, attrs) {

     element.css({
       visibility: 'hidden',
       position: 'absolute',
       top: '0px',
       left: '0px'
      });

      scope.$watch('position', function(){
        if(scope.position.length > 0) move(scope.position);
      }, true);

      function move(pos){
        element.css({
          visibility: 'visible',
          left:  pos[0] + 'px',
          top: pos[1] + 'px'
        });
      }
    }
  };
});

这是一个有效的 plunker .