I have a list of outerItems. Inside each outerItem Ihave 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, please tell me what to do.
Got it!
In controller:
function innerItem($scope, $element){
var jQueryInnerItem = $($element);
}
So simple.
the Better and Correct solution is to have a directive, The scope in the controller of directive and main controller is same. use that $element to do DOM operation like here i am doing to find child element. also the method defined in the directive controller is accessible in the main controller..
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'
});