CODEWITHSUNDEEP
javascripthtmlangularjsiframe
Kane Mitchell
Kane Mitchell

Reputation: 370

AngularJS has an iFrame and I send information back to the parent to do something and it doesn't do it

So I use an iFrame in my site and once the user and finished within the part inside the iFrame a notification is sent to parent browser. But this doesn't seem to change the Angular app after it receives the notification.

See below how the notification from the iFrame is sent to the parent.

Does have any ideas? Would really be appreciated.

App.js

// The Test is in an iFrame
// To find out when the test is complete we add a listener.
// This listens for "test-complete". On this go back to the chapter page.
var eventMethod     = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer         = window[eventMethod];
var messageEvent    = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
    #### DOESN'T SEEM TO CHANGE THE SCOPE ITEMS ####
    $scope.gotoPanel(0);
    $scope.overview[4].panelShow = false;
    $scope.overview[5].panelShow = false;
    console.log(e.data);    
    $scope.showDirections = false;      
},false);

iFrame Notification Code:

parent.postMessage("test-complete","http://percurra.hullabaloo.uk/training-area/test.php");

Upvotes: 0

Views: 762

Answers (1)

Reactgular
Reactgular

Reputation: 54821

You need to call $apply(..) when making changes to a scope from outside of Angular.

eventer(messageEvent,function(e) {
    $scope.$apply(function() {
       $scope.gotoPanel(0);
       $scope.overview[4].panelShow = false;
       $scope.overview[5].panelShow = false;
       console.log(e.data);    
       $scope.showDirections = false;      
   });
},false);

Upvotes: 2

Related Questions