我的目标是更新用于包含我的图像的 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/
顺便说一下,我只在页面刚开始时添加一次图片。
$apply()
。 - Duncan