AngularJS element.find更改了我的对象

AngularJS element.find changes my objects

本文关键字：我的 对象 element find AngularJS      更新时间：2024-02-20

在查找元素时，我对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进行查找？

相关文章：