Javascript 使用angularjs通过标记查找元素

需求描述：

我有一个页面，其中有一个描述部分。描述部分基本上是一个很大的html部分，由

图像

和

文本

组成

因此，如果用户单击一个图像，那么该用户应该被重定向到另一个页面，该页面中只有描述数据。重定向后，页面应滚动至单击的图像

标准溶液

我知道这个问题很容易解决，如果我们有每个图像的

id

，这样我们就可以用

hash

在

url

中发送

id

，然后使用

$anchorscroll

，页面将自动滚动到单击的图像

实际问题

但问题是我没有带

img

标签的

id

说明部分的html如下所示：

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

。。。。
....

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

另一个页面也具有与前一个页面相同的描述数据和HTML结构。我只需要滚动页面到点击的图像。
解决方案是什么？
用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
}

/**
*获取仅具有src属性的所有图像
*@param element从何处开始函数的任何元素。如果未定义，将使用文档
*@返回{Array}匹配元素的数组
*/
函数getMyImages（元素）{
元素=元素| |文档；
var images=element.querySelectorAll（'img[src]'）；//获取具有src属性的所有图像
var匹配=[]；
对于（var i=0，j=images.length；i1）{//跳过具有多个属性的图像
继续；
}
如果（属性[0].name=='src'）{//如果该属性是src属性，请将其添加到匹配项中
匹配。推送（图像[i]）；
}
}
return matches；//匹配现在只包含只有src属性的图像
}
用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
}

/**
*获取仅具有src属性的所有图像
*@param element从何处开始函数的任何元素。如果未定义，将使用文档
*@返回{Array}匹配元素的数组
*/
函数getMyImages（元素）{
元素=元素| |文档；
var images=element.querySelectorAll（'img[src]'）；//获取具有src属性的所有图像
var匹配=[]；
对于（var i=0，j=images.length；i1）{//跳过具有多个属性的图像
继续；
}
如果（属性[0].name=='src'）{//如果该属性是src属性，请将其添加到匹配项中
匹配。推送（图像[i]）；
}
}
return matches；//匹配现在只包含只有src属性的图像
}
负面排名的任何原因。请？CSS选择器允许任何CSS选择器，而不仅仅是ID。在您的例子中，
document.querySelector（“div.someClass img”）
将完成这项工作，尽管如果angular不允许您直接向元素添加引用，我会非常惊讶，因此您甚至不需要执行任何查询选择，但是只要根据元素的角度绑定来访问它就行了。我不能使用类来查找图像，因为数据是通过CMS输入的，可以是任何形式。虽然我试图通过角度添加引用。但我不知道这是否是一个沉重的选择。是否有负面排名的理由。请？CSS选择器允许任何CSS选择器，而不仅仅是ID。在您的例子中，
document.querySelector（“div.someClass img”）
将完成这项工作，尽管如果angular不允许您直接向元素添加引用，我会非常惊讶，因此您甚至不需要执行任何查询选择，但是只要根据元素的角度绑定来访问它就行了。我不能使用类来查找图像，因为数据是通过CMS输入的，可以是任何形式。虽然我试图通过角度添加引用。但我不知道这是否是一个沉重的选择。我正在尝试您的解决方案，但由于数据是通过API调用传入的。现在，我得到的
元素
是未定义的，因为数据是在某个时间之后出现的。我正在使用
post链接在指令内部进行尝试。但幸运的是，在响应位于DOM内部之后，您不必调用该方法。如果您正在使用
$http
服务调用内部的方法如果
成功
块如果该方法位于没有任何ajax调用控制的指令内部，那么您必须创建自己的响应侦听器。查看
$broadcast
和
$on
我这样做
var div=document.createElement（'div'）
div.innerHTML=元素[0].innerHTML
console.log（div.children.queryselectoral（'img[src]”）但querySelectorAll是未定义的函数。有什么想法吗？
console.log（div.children.querySelectorAll（'img[src'））应该是
console.log（div.querySelect