javascript-如何从控制器获取表示ngRepeat中元素的HTML节点的参数？

我有一个数组或图像URL,它们以ng-repeat插入< img>元素：

<ul>
    <li ng-repeat="image in images">
        <img src="{{image.src}}"/>
    </li>
</ul>

在将这些图像插入DOM之后,我想从控制器中获取这些图像的尺寸(宽度和高度).有没有办法遍历$scope.images数组并获得对表示其元素的DOM节点的引用？如果没有,那么最好的方法是什么？

解决方法:

您可以获得一个特定的对象并直接在指令中对其进行更改,因此,如果您使用的是：ng-repeat =“ imgs in imgs”,那么您将在指令中包含scope.img：

.directive('loadable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 

               // this is it:

                scope.img.dimensions = {
                    height: element[0].naturalHeight,
                    width: element[0].naturalWidth
                }

                console.log(scope.img) // now the original object (in scope)
                                       // has dimensions property!

            });

        }
    }
});

示例：http://jsfiddle.net/XqeCr/1/

更新,建议将对象的操作包装在作用域的$aplly方法调用中：

     scope.$apply( function(){
         scope.img.dimensions = {
             height: element[0].naturalHeight,
             width: element[0].naturalWidth
         }
     });

更新的示例：http://jsfiddle.net/XqeCr/4/

标签：angularjs,dom,angularjs-ng-repeat,ng-repeat,javascript
来源： https://codeday.me/bug/20191122/2061459.html