Question

在查找元素时，我对angularJS有一点问题。当我使用element.find('type').attr('id' ,someid);

时，我的对象似乎已被更改

这里有一些进一步的信息：

我只在一个位置使用该指令
我使用angularjs 1.3.10。

我准备了一个羽毛http://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等。有这个原因吗？

Answer 1

以下是实际发生的事情：

element.find('canvas')返回element内的所有cavases。
element.find('canvas').attr('id' ,someid) 更改了第一个返回画布的 id属性。
因此，_gradientCanvas[0]，_overlayCanvas[0]和_arcOverlay[0]都引用element内的相同元素 - first 画布。这解释了所描述的行为 - attr('id' , 'chColorGradient')不按ID进行过滤，但会更改集合中第一个元素的ID。

如果您想按ID过滤，请查看以下帖子：AngularJS: How to .find using jqLite?

AngularJS element.find更改了我的对象

1 个答案: