Как разместить кнопку над изображением в позиции (x, y) с помощью Javascript / AngularJs

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

Мне нужно поместить кнопку поверх изображения 2 в положение (x, y) изображения 1 с angularjs / javascript, где пользователь щелкнул (Изображение 1).

Оба изображения одинаковы.

Я изучал, но не нашел решения, используя только angularjs или javascript.

Любые предложения.

Answer 1

При событии щелчка / функции на изображении 1 установите переменные положения, затем свяжите положение других элементов с этими переменными, используя стиль ng (Вы также можете использовать ng-show для второго элемента и установить его как true в функции щелчка img1, чтобы скрыть / показать элемент только после нажатия)

<!-- this is the image that will show after clicking img 1 -->
<img src="http://www.google.com/favicon.ico" width="100"
     ng-show="$scope.clickedImg1" style="position: absolute; width: 50%;"
     ng-style="{'left': $scope.posx, 'top': $scope.posy}"/>

Что-то в этом роде в любом случае, это позволит вам динамически перемещать элемент, изменяя переменные "posx" и "posy".

posx и posy должны быть установлены в виде строки следующим образом:

$scope.posx = someXInt + 'px';
$scope.posy = someYint + 'px';

Answer 2

Принцип уже был предложен @ Эдди Ховардом. Вы можете поместить функциональность в директиву для удобства, что-то вроде этого (хотя это не оптимальное решение):

.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'
        });
      }
    }
  };
});

Вот рабочий Плункер .

Answer 3

Для позиционирования я использую это в JavaScript:

<img src="http://www.google.com/favicon.ico" alt="" ng-click="mark($event)" 
    style="position: absolute; width: 50%; left: 0px; top: 0px; bottom: 0px;"/>

Это всегда заставит объект появиться в левой части страницы. Вы добавляете это к своему другому изображению:

style="position: absolute; width: 25%; left: 0px; top: 0px; bottom: 50%;"

И это должно поместить ваше другое изображение сверху на половину ширины и высоты.

Надеюсь, это то, что вы ищете. Удачи