Angularjs: call other scope which in iframe

Angularjs: call other scope which in iframe

------------------------------------------------------------------------------------------------------------

To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they are both in the same domain, with access to the angular scope, try following those steps:

*You don’t need the parent to have reference to angularJS library…

Calling to child iFrame from parent

1.Get child iFrame element from the parent (link to answer):

document.getElementById("myIframe").contentWindow

2.Access the scope of the element:

document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope()

3.Call the scope’s function or property:

document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope().someAngularFunction(data);

4.Call $scope.$apply after running the logic of the function/updating the property (link to Mishko’s answer):

$scope.$apply(function () { });

• Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example)

Calling parent from child iFrame

1. Calling the parent function:

parent.someChildsFunction();

Will update also on how to do it cross domain if it is necessary..

shareedit

edited May 23 '17 at 10:31

Community♦

11

answered Feb 12 '14 at 16:04

Urigo

2,7981425

 

add a comment

up vote12down vote

You should be able to get parent scope from iFrame:

var parentScope = $window.parent.angular.element($window.frameElement).scope();

Then you can call parent method or change parent variable( but remember to call parentScope.$apply to sync the changes)

Tested on Angular 1.3.4

shareedit