在查找元素时,我对angularJS有一点问题。当我使用element.find('type').attr('id' ,someid);
时,我的对象似乎发生了变化
这里有一些进一步的信息:
- 我只在一个位置使用指令
- 我使用angularjs 1.3.10
我准备了一个plunkerhttp://plnkr.co/edit/fW4HsbqRhMWiw8hSLTVH?p=preview这说明了我的意思。在找到另一个元素后,它会向上一个找到的元素发出警报。结果是,以前找到的元素与现在找到的元素相同(解释起来有点棘手,请参阅代码中的注释,了解我的确切意思)。
我的链接功能看起来是这样的:
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
}
}
这是模板
<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>
我不太清楚它为什么这么做。我试着用netbeans调试它,但在我再次调用element.find后,它似乎真的改变了我的var _gradientCanvas
等。这是有原因的吗?
以下是实际发生的情况:
- CCD_ 3返回CCD_
element.find('canvas').attr('id' ,someid)
更改第一个返回画布的id
属性- 因此,
_gradientCanvas[0]
、_overlayCanvas[0]
和_arcOverlay[0]
都引用了element
内的同一元素-第一个画布。这解释了所描述的行为——attr('id' , 'chColorGradient')
不按id进行过滤,而是更改集合中第一个元素的id
如果你想通过id进行过滤,请查看以下文章:AngularJS:如何使用jqLite进行查找?