使用Angular JS加載圖像後更新DIV元素

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/

Btw。啓動時，我只在頁面上添加一次圖像。

Answer 1

在你的指令添加一個scope.$apply();：

編輯的jsfiddle：

http://jsfiddle.net/vmeaseag/

事實上，檢查角文檔：$rootScope.Scope

$適用（）用來執行角度框架外部的角度表達式。 （例如，來自瀏覽器DOM事件， setTimeout，XHR或第三方庫）。

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