ng-styleはeventListnerに基づいて更新されません

Question

eventlistnerを作成すると、postMessageまで待ってからIframeHeightを更新しますが、直ちに高さが変更されることはありません。 （クリックして、入力ボックスに入力するなど）。

$scope.getIframeHeight = function(){ 
    $scope.IframeHeight = "800"; 
    if (!window.addEventListener) { 
     // IE8 support (could also use an addEventListener shim) 
     window.attachEvent('onmessage', $scope.handleMessage); 
    } else { 
     window.addEventListener('message', $scope.handleMessage, false); 
    } 
}; 

$scope.handleMessage = function(event){ 
    var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object. 
    if (origin !== "http://localhost:8060") 
     return; 
    console.log('parent received message!: ',event.data); 
    $scope.IframeHeight = event.data; 
}; 


<iframe class='iframe' id='iframe' scrolling='no' ng-style="{'height': IframeHeight + 'px'}" width="100%" 
     frameborder='0' ng-src="{{trustSrc(data.IframeSRC)}}"> 
</iframe> 

Answer 1

だから、$ scope.IframeHeightに加えられた変更が反映されない理由を私は知らないが、これは私の仕事：

$scope.handleMessage = function(event){ 
var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object. 
if (origin !== "http://localhost:8060") 
    return; 
console.log('parent received message!: ',event.data); 
***$scope.$apply(function(){ 
     $scope.IframeHeight = event.data; 
    });*** 
}; 

ここ