ng样式不基于eventListner进行更新

ng-style does not update based on eventListner

本文关键字：更新 eventListner 样式 ng      更新时间：2023-09-26

创建事件列表后，它会等待postMessage，然后更新IframeHeight，但它不会立即更改高度，只有当我执行一些活动（如单击、键入输入框等）时，才会在ui上触发更改。

$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>

所以我不知道为什么对$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;
    });***
};
相关文章：