Angularjs: call other scope which in iframe

angularjs iframe
iframes in angular
use javascript on iframe
call javascript in child iframe
iframe call child function
angular iframe variable
javascript call function in iframe child
iframe javascript

In my test, given 2 document, A and B. In A document, there is an iframe, the iframe source is B document. My question is how to modify B document certain scope of variable?

Here is my code: A document

<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
  var g ;
function test($scope,$http,$compile)
{
    $scope.tryget = function(){

        var iframeContentWindow = $("#iframe")[0].contentWindow;
        var iframeDOM = $("#iframe")[0].contentWindow.document;
        var target = $(iframeDOM).find("#test2");
        var iframeAngular = iframeContentWindow.angular;
        var iframeScope = iframeAngular.element("#test2").scope();
        iframeScope.parentcall();
        iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ;
        iframeScope.tempvalue = 66;
        iframeContentWindow.tt = 22;
        iframeScope.parentcall();
        console.log(iframeScope.tempvalue);
        console.log(angular.element("#cont").scope());
    }
}

  </script>
</head>
<body>

<div ng-controller="test">
        <div id="cont" >
            <button ng-click="tryget()">try</button>
        </div>
</div>
<iframe src="test2.html" id="iframe"></iframe>

</body>
</html>

My B document:

<!doctype html>
<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
var tt =11;
function test2($scope,$http,$compile)
{
    console.log("test2 controller initialize");
    $scope.tempvalue=0;
    $scope.parentcall = function()
    {
        $scope.tempvalue = 99 ;
        console.log($scope.tempvalue);
        console.log(tt);
    }
}

  </script>
</head>
<body>

<div ng-controller="test2" id="test2">
        <div id="cont" >
            <button ng-click="parentcall()">get script</button>
        </div>
        {{tempvalue}}
</div>

</body>
</html>

Note: Actually there is some way to do it, which i feel it like a hack instead of proper way to get it done: that is create a button in b Document, and then bind with angularjs ng-click. After that A document jquery "trigger" click on button.

javascript - 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,  Angularjs: call other scope which in iframe with Cross Domain scenario. I am hitting the cross domain scenario and tried your solution.. yet cross domain solution from you will be great help. Thanks in advance. In the child iFrame i have a button and following controller function in.

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

javascript Angularjs: call other scope which in iframe?, Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example). 1.Get child iFrame element  Angularjs: appeler d'autres scope qui dans iframe dans mon test, donné 2 document, A et B. Dans un document, il y a une iframe, la source d'iframe est le document B. Ma question Est de savoir comment modifier un document B pour une certaine portée de variable?

The best way in my mind to communicate with the iframe is using window.top. If you want your iframe to get your parent's scope, you can set window.scopeToShare = $scope; within your controller and it becomes accessible for the iframe page at window.top.scopeToShare.

If you want your parent to get the iframe scope, you can use

window.receiveScope = function(scope) {
  scope.$on('event', function() {
    /* Treat the event */
  }
};

and within the iframe controller call window.top.giveRootScope($rootScope);

WARNING: If you are using this controller multiple times, make sure to use an additional ID to identify which scope you want.

Top 18 Most Common AngularJS Mistakes That Developers Make , In this article you will learn about most common AngularJS developer debugInfoEnabled is set to false, calling .scope() on a DOM node will return undefined . memory usage, frame rate, and the dissection of the different processes that  AngularJS: Adding ng-click within element.append. angularjs,directive. You should compile the html to bind the directives like ng-click to scope properties.

This one is quite simple and works for me:

in the controller code of iframe page:

$window.parent.window.updatedata($scope.data);

in the parent page controller code:

window.updatedata = function (data) {
 $scope.$apply(function () {
     $scope.data = data
   }
 }

iframe from an AngularJS directive, var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, $element) { }); app.directive('iframeDirective', ['$sce', function($sce) { return  With the iframe approach you don’t need to clean up your AngularJS code before you start. You can leave your baggage in the past, your legacy AngularJS code can remain as your legacy AngularJS code and you can start afresh with Angular.

Angular data binding between iFrames, DOCTYPE html> <html> <head> <script data-require="angular.js@1.2.22" each frame that causes digest cycle on // all other frames .run(function($​rootScope,  When using AngularJS, it is considered best practice to use AngularJS directives to modify the DOM, not jQuery. Using jQuery a lot usually means that you aren't doing things the "AngularJS way" and is therefore a code smell. But what if you just have to interact directly with AngularJS using jQuery? Here's how.

Same-domain iframe communication, AngularJS scope events for same-domain bi-directional iframe communication. Sunday July 27th, 2014. It's possible for Angular apps to communicate, where  What are Scopes? Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. Scope characteristics

Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example). Calling  In AngularJS when it comes to communicating between controllers, one would naturally assume to reference another controller you can simply inject it into another controller and call its methods: however, you cannot do that. Method 1: Shared service One such method of communicating and sharing methods betweens multiple controllers is a shared service. Here you […]

Comments
  • Just a quick note. Remember that you can't usually communicate with between an iFrame and the parent page unless they are on the same domain. There are ways to do it, but you can't just access them directly. Just so you don't run into this issue later :)
  • Yes, there are same domain and same project. Just cant properly manipulate those JS object and variable. Wondering if anyone have a better idea.
  • I'd like to add that you can grab the parent scope from the iframe like this: var $scope = parent.angular.element('#element-id').scope();
  • Urigo, that's great and consolidated. How to do it cross domain?
  • Thanks for the great answer. Angular 1.2x introduced the $evalAsync() method which avoids having to use $timeout with $apply. Using $timeout was recommended in earlier versions of Angular to guarantee that the change would be picked up in the $digest cycle (could end up in a race condition otherwise).
  • WARNING! .scope() is not a production method. It is for debugging only and is removed in production mode! docs.angularjs.org/guide/production
  • This really saved me!!
  • WARNING! .scope() is not a production method. It is for debugging only and is removed in production mode! docs.angularjs.org/guide/production
  • @JamiePate You are correct. I think we have to either not disable debug info or find another solution.