Question

我的目标是更新用于图像容器的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/

顺便说一下。我只在启动时在页面上添加一次图像。

Answer 1

在指令中添加scope.$apply();：

编辑JsFiddle：

http://jsfiddle.net/vmeaseag/

事实上，请查看Angular文档：$rootScope.Scope

$ apply（）用于从外部执行角度表达式角度框架。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库。）

或更好：https://docs.angularjs.org/guide/scope#scope-life-cycle

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

1 个答案: