How do I get current scope dom-element in AngularJS controller?

Question

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

sudo bangbang · Accepted Answer · 2016-08-03 11:58:40Z

70

In controller:

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

edited Aug 3, 2016 at 11:58

sudo bangbang

28.4k11 gold badges78 silver badges77 bronze badges

answered Oct 20, 2012 at 10:41

gorpacrate

5,6913 gold badges23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Ganaraj Over a year ago

you have chosen the wrong way. Dont EVER access $element in the controller. You need to wrap this as a Popup directive and then put in the pop-up's in your HTML.

hurshagrawal Over a year ago

It goes against angular's no-dom-manipulation-in-the-controller mantra. Keeps code decoupled, allows for easier testing, and keeps all dom manipulation code declarative and in the templates. That being said, sometimes you need the element. Browser autocompletes of fields, for example, fill the inputs but don't trigger ng_model updates. In those cases you sort of have to $(el).val() the input.

GeekyMonkey Over a year ago

It's not ideal, but sometime unavoidable. Like if you're dealing with inner content delivered from a CMS.

Den Over a year ago

Accessing elements in controller is completely OK if you have to deal with integrating Angular with the real world.

Michael Scheper Over a year ago

@hurshagrawal: I hear this mantra a lot, but none of its chanters have shown me how to write a controller for a Google Map, and add custom controls without manipulating the DOM. (Having the controller delegate to a service to do it doesn't count.) angular-google-maps doesn't feature the ability to add custom controls, possibly for this very reason. If you or any of your disciples can show me, post code here. Otherwise, I'll continue to assume your mantra is as applicable to the real world as any other dogma.

|

Giacomo1968 · Accepted Answer · 2016-04-05 00:01:43Z

7

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

edited Apr 5, 2016 at 0:01

Giacomo1968

25.3k11 gold badges78 silver badges106 bronze badges

answered Mar 18, 2015 at 16:30

shyam_

2,4902 gold badges33 silver badges55 bronze badges

2 Comments

fdrv Over a year ago

the question is how to get html in dom. So how to get in controller string of html from some dom element by id?

drdrej Over a year ago

i've voted this answer down, because it's not an answer for posted question.

Collectives™ on Stack Overflow

How do I get current scope dom-element in AngularJS controller?

2 Answers 2

13 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related