Encountering an issue with angularJS when trying to locate elements. It appears that the objects are being altered when using
element.find('type').attr('id' ,someid);Here are some additional details:
- The directive is only used in one location
- Angularjs version 1.3.10 is being utilized.
I have prepared a plunker http://plnkr.co/edit/fW4HsbqRhMWiw8hSLTVH?p=preview to illustrate the issue. It displays the previously found element after finding another. The previous element remains the same as the currently found element (explained further in the code comments).
The link function looks like this:
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
}
}
Below is the template provided:
<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>
It's unclear why this behavior is occurring. Attempts to debug with Netbeans indicate that the var _gradientCanvas is being modified after calling element.find again.
Any insights into why this might be happening?