3

ng-repeat我有一个数组或图像 URL，我使用as<img>元素插入到页面中：

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

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

4

2 回答 2

2

您可以获取特定对象并直接在指令中更改它，因此如果您使用: ng-repeat="img 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/

于 2013-10-10T10:53:41.840 回答
1

您不应该从控制器访问 DOM - 例如，您将无法测试您的控制器。而是编写一个指令，将 onload 处理程序放在这些图像上，一旦它被调用 - 它会将宽度和高度放入范围

function(scope, el){
  el.find('img').on('load', function(){
    scope.img.width = this.width;
    scope.img.height = this.width;
  })
}

并在您的控制器 $watch 中查看此更改，并在填充数据后执行 smth。请注意如何将数据从指令设置到范围内 - 您应该在表达式中添加点以免数据锁定在子范围内 - 请参阅本文：http: //jimhoskins.com/2012/12/14/nested-scopes-in- angularjs.html

于 2013-10-10T10:49:56.160 回答