I have a list of outerItems. Inside each outerItem, I have a list of innerItems. They are dynamically sorted.
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.
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.
So how can I get jQuery object of current scope element? Or, if I've chosen the wrong way
This question is related to
javascript
jquery
dom
scope
angularjs
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.
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'
});
Source: Stackoverflow.com