使用angularjs

Question

要求说明：

我有一个页面，其中有一个描述部分。描述部分基本上是一个由images和texts组成的大型html部分。

因此，如果用户点击图片，则该用户应重定向到另一个，其中只包含描述数据 。重定向后，页面应自行滚动到该单击的图像。

标准解决方案

如果每个图片都有id，我知道问题很简单，这样我们就可以id使用url发送hash，然后再使用$anchorscroll，页面将自动滚动到该点击的图片。

实际问题

但问题是我没有带id标记的img。

description section的html是这样的：

....
<div class="someclass"><img src="cdn url of the image"></div>
....

请注意，html结构没有这种特殊格式。  它可以是任何形式。  但是img标签只包含src。

其他页面也具有与前一个相同的描述数据和HTML结构。我只需要将页面滚动到点击的图像。 什么可以解决方案？

Answer 1

使用AngularJS进行此类操作并不是一种好的做法。 无论如何，我为你创建了一个搜索仅包含src属性的图像的函数。

但要小心，如果删除或操纵元素，请记得调用$scope.$apply()方法！否则AngularJS将不知道任何元素已被更改。

/**
 * Gets all images with only a src attribute
 * @param element Any element from where to start the function. If not defined document will be used
 * @returns {Array} An array of Matching element
 */
function getMyImages(element) {
    element = element || document;
    var images = element.querySelectorAll('img[src]');//Get all images with src attributes
    var matches = [];
    for (var i = 0, j = images.length; i < j; i++) {

        var attributes = images[i].attributes;

        if (attributes.length > 1) {//Skip images with more than one attribute
            continue;
        }
        if (attributes[0].name === 'src') {//if the attribute is a src attribute, add it to the matches
            matches.push(images[i]);
        }
    }

    return matches;//Matches will now just contain images with only src attribute
}