使用Angular JS在加载图像后更新DIV元素

Question

使用Angular JS在加载图像后更新DIV元素

3

我的目标是更新用于包含我的图像的 div 元素（其宽度和高度）。问题在于，视图和控制器比图片加载要快得多，当最终调用时，视图已经被渲染，我无法再设置宽度和高度。也许我的方法完全错误... 也许我应该采用其他方法... 这里是我的测试代码，您可以查看并理解我想做什么：

<div ng-controller="c">
   <div id={{my_id}} width={{widthOfOutsideWrapper}} height={{heightOfOutsideWrapper}}>
       <img ng-src="{{src}}" imageonload />
   </div>
</div>

....

app.controller('c', function($scope) {
    $scope.src ="https://www.google.com.ua/images/srpr/logo4w.png";
});

...

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
                scope.widthOfOutsideWrapper= this.width;
                scope.heightOfOutsideWrapper= this.height;
                scope.my_id = "testing";
            });
        }
    };
});

这是一个jsfiddle链接：

http://jsfiddle.net/2CsfZ/855/

顺便说一下，我只在页面刚开始时添加一次图片。

- pawelforums

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vp-platform · Accepted Answer

在你的指令中添加scope.$apply();:

编辑后的 JsFiddle: http://jsfiddle.net/vmeaseag/ 实际上，查看 Angular 文档：$rootScope.Scope

$apply() 用于在 Angular 框架之外执行表达式（例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。

或参考这里：https://docs.angularjs.org/guide/scope#scope-life-cycle