Как получить текущий элемент dom-element в контроллере AngularJS?

У меня есть список внешних элементов. Внутри каждого внешнего элемента у меня есть список innerItems. Они динамически сортируются.

Когда указатель мыши указывает на один из внутренних элементов, я должен показать всплывающее окно прямо над этим элементом innerItem.

Popup div является дочерним элементом тела, потому что я не хочу иметь отдельное всплывающее окно для каждого из внутренних элементов.

Как я вижу - на ng-mouseover Я вызываю функцию, которая устанавливает свойства left/top для моего абсолютно позиционированного всплывающего окна. Поэтому для каждого из внутренних элементов я бы хотел вызвать метод jQuery .offset(), который дает мне значения left/top из верхнего левого угла страницы.

Итак, как я могу получить объект jQuery текущего элемента scope? Или, если я выбрал неправильный путь

Ответ 1

В контроллере:

function innerItem($scope, $element){
    var jQueryInnerItem = $($element); 
}

Ответ 2

Лучшее и правильное решение - иметь директиву. Объем такой же, как в контроллере директивы, так и в главном контроллере. Используйте $element для выполнения операций DOM. Метод, определенный в директивном контроллере, доступен в основном контроллере.

Пример, поиск дочернего элемента:

var app = angular.module('myapp', []);
app.directive("testDir", function () {
    function link(scope, element) { 

    }
    return {
        restrict: "AE", 
        link: link, 
        controller:function($scope,$element){
            $scope.name2 = 'this is second name';
            var barGridSection = $element.find('#barGridSection'); //helps to find the child element.
    }
    };
})

app.controller('mainController', function ($scope) {
$scope.name='this is first name'
});