Question

我需要从网络上加载的图像尺寸（动态）以适应我的显示。所以我需要在控制器中使用onload事件（视图还没有渲染），如下所示：

.controller("MyCtrl", function($scope){
    img.onload = function () {
        // $scope changes not effective
}

我知道我可以使用$apply，但我不是它的忠实粉丝，因为它会伤害表演。你有任何其他我可以使用的解决方案吗，是否让Angular知道我正在做什么（img.onload不是这种情况）或考虑我的更改的范围？

谢谢！

Answer 1

您需要使用directive来获取图像属性，并将它们分配给控制器中的范围。这是一些伪代码，不能保证它100％开箱即用，但它应该让你知道需要发生什么。

<强>模板

<div ng-controller="MyCtrl">
    <img img-size src="..." />
</div>

<强>指令

.directive('imgSize', function() {
    return {
        link: function (scope, elem, attrs) {
            elem.on('load', function(e) {
                var width = $(this).width();
                var height: $(this).height();

                scope.$evalAsync(function() {
                    scope.imageWidth = width;
                    scope.imageHeight = height;
                });
            });
        }
    }
});

Answer 2

使用将在控制器$ scope中注入高度/宽度的指令。

<img height-width />

Answer 3

我假设你在当前视图中有你的图像。您可以使用以下内容访问它：

Branch...

之后

Diff with...

应该让你更进一步。

Angular - 控制器中的图像onload事件

3 个答案: