使用 Angular JS 加载图像后更新 DIV 元素
Update DIV element after loading image using Angular JS
我的目标是更新用于图像容器的 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/
顺便说一句。我只在启动时在页面上添加一次图像。
在您的指令中添加一个 scope.$apply();
:
已编辑 JsFiddle:
事实上,查看 Angular 文档:$rootScope.Scope
$apply() is used to execute an expression in angular from outside of
the angular framework. (For example from browser DOM events,
setTimeout, XHR or third party libraries).
或此处更好:https://docs.angularjs.org/guide/scope#scope-life-cycle
我的目标是更新用于图像容器的 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/
顺便说一句。我只在启动时在页面上添加一次图像。
在您的指令中添加一个 scope.$apply();
:
已编辑 JsFiddle:
事实上,查看 Angular 文档:$rootScope.Scope
$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).
或此处更好:https://docs.angularjs.org/guide/scope#scope-life-cycle