Обновить элемент DIV после загрузки изображения с помощью Angular JS

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/

В самом деле, проверьте угловые документы: $rootScope.Scope

$ применяются() используется для выполнения выражение в угловом диапазоне от угловой каркас. (Например, из событий браузера DOM, setTimeout, XHR или сторонних библиотек).

или лучше здесь: https://docs.angularjs.org/guide/scope#scope-life-cycle