如何在AngularJS控制器中获取当前范围的dom-element ?

I have a list of outerItems. Inside each outerItem, I have a list of innerItems. They are dynamically sorted.

我有一份物品清单。在每个outerItem中，我有一个innerItems列表。他们是动态排序。

When mouse cursor points at one of innerItems, I have to show the popup window right above that innerItem element.

当鼠标光标指向一个内项时，我必须在这个内项元素的正上方显示弹出窗口。

Popup div is body's child, because I do not want to have a separate popup for each of innerItems.

Popup div是body的子元素，因为我不希望为每个内项都有单独的弹出窗口。

The way as I see it — on ng-mouseover I call the function that sets left/top properties to my absolutely positioned popup. So for each of innerItems I'd like to call jQuery .offset() method that gives me left/top values from the top-left corner of page.

正如我看到的那样——在ng-mouseover中，我调用函数来设置我的绝对位置弹出窗口的左/上属性。因此，对于每个内项，我都要调用jQuery .offset()方法，该方法从页面的左上角给出左/上值。

So how can I get jQuery object of current scope element? Or, if I've chosen the wrong way

那么如何获得当前作用域元素的jQuery对象呢?或者，如果我选错了路

2 个解决方案

#1

In controller:

控制器:

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

#2

The better and correct solution is to have a directive. The scope is the same, whether in the controller of the directive or the main controller. Use $element to do DOM operations. The method defined in the directive controller is accessible in the main controller.

更好和正确的解决方案是有一个指示。无论在指令的控制器还是主控制器中，作用域都是相同的。使用$element执行DOM操作。指令控制器中定义的方法可以在主控制器中访问。

Example, finding a child element:

例如，查找子元素:

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

#1