AngularJS element.find changes my objects

Question

I have a little problem with angularJS when it comes to finding elements. It seems that my objects are changed when i use element.find('type').attr('id' ,someid);

Here some further information:

I use the directive only in one position
I use angularjs 1.3.10.

i prepared a plunker http://plnkr.co/edit/fW4HsbqRhMWiw8hSLTVH?p=preview which shows what i mean. It alerts the previous found element after it has found another. What happens is that the previously found element is the same as the now found element ( a little bit tricky to explain, see the comments in the code to see what exactly i mean).

My link function looks so:

function link(scope,element,attrs)
{
    var _gradientCanvas = element.find('canvas').attr('id' , 'chColorGradient');
    if(_gradientCanvas[0].id === 'chColorGradient')
    {
        var _gradientContext = _gradientCanvas[0].getContext('2d');
    }
    var _overlayCanvas = element.find('canvas').attr('id' , 'chColorGradientOverlay');
    if(_overlayCanvas[0].id === 'chColorGradientOverlay')
    {
        var _overlayContext = _overlayCanvas[0].getContext('2d');
        alert(_gradientCanvas[0].id); //alerts: chColorGradientOverlay , but it should alert chColorGradient

    }
    var _arcOverlay = element.find('canvas').attr('id' , 'chColorArcOverlay'); 
    if(_arcOverlay[0].id === 'chColorArcOverlay')
    {
        var _arcContext = _arcOverlay[0].getContext('2d');
        alert(_gradientCanvas[0].id);//alerts: chColorArcOverlay , but it should alert chColorGradient
        alert(_overlayCanvas[0].id);//alerts: chColorArcOverlay , but it should alert chColorGradientOverlay
    }
}

Here is the template

<canvas class="chColorPickerCanvas" id="chColorGradient" width="255px" height="255px">
</canvas>
<canvas class="chColorPickerCanvas" id="chColorGradientOverlay" width="255px" height="255px">
</canvas>
<canvas class="chColorPickerCanvas" id="chColorArcOverlay" width="255px" height="255px">
</canvas>

i am not quite sure why it does this. i tried to debug into it with netbeans but it seems really that it changes my var _gradientCanvas etc after i called element.find another time. Is there a reason for this ?

your code finds first canvas inside an element: element.find('canvas') and then attr('id' , 'chColorGradient') changes its id to chColorGradient: element.find('canvas').attr('id' , 'chColorGradient');. Second time your code again finds first canvas and changes its id to chColorGradientOverlay: var _overlayCanvas = element.find('canvas').attr('id' , 'chColorGradientOverlay'); and so on — Dmitry Pavliv
– Dmitry Pavliv, Commented Feb 21, 2015 at 18:08
oh, i thought it was used to filter. I now have to find a different approach. Thanks for the quick answer — Bongo
– Bongo, Commented Feb 21, 2015 at 18:15

Community · Accepted Answer · 2017-05-23 12:12:40Z

2

Here is what actually happens:

element.find('canvas') returns all cavases inside element.
element.find('canvas').attr('id' ,someid) changes id attribute of first returned canvas.
so, _gradientCanvas[0], _overlayCanvas[0] and _arcOverlay[0] all refers to the same element - first canvas inside element. And this explains described behaviour - attr('id' , 'chColorGradient') doesn't filters by id, but changes id of first element in collection.

If you want to filter by id, look into this post: AngularJS: How to .find using jqLite?

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Feb 21, 2015 at 18:24

Dmitry Pavliv

35.9k13 gold badges85 silver badges85 bronze badges

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

3 Comments

Bongo Over a year ago

since i know the order of elements in the template would it be considered save to use var canvasses = element.find('canvas'); var c1 = canvasses[0]; var c2 = canvasses[1] to get the element i am wanting ?

Dmitry Pavliv Over a year ago

yes, if you can confirm that order woudn't change, you can rely on it, here is the plunker

Bongo Over a year ago

okay thanks i will keep that in mind when changing my code. Since your answer explains where i was wrong, another helpfull thread is contained and seems to help me along i will mark his as accepted answer.

Collectives™ on Stack Overflow

AngularJS element.find changes my objects

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related