CODEWITHSUNDEEP
angularjsdebuggingiframe
user2167582
user2167582

Reputation: 6368

how to use angular chrome debug tool to debug across iframe

I have an iframe nested in my app that has an angular project in it.

How can I get access to the scope inside that?

Upvotes: 3

Views: 1599

Answers (3)

00500005
00500005

Reputation: 4057

The magic is in <iframe>.contentWindow

When going from the parent to the child iframe (which is what you do when debugging), you'll want get the child window object, and use its definition of angular.

var w = $('iframe')[0].contentWindow;
w.angular.element(<selector>).scope();

Note that this does work with chrome's development shortcuts, so you can do

w.angular.element($0).scope()

to get the scope of the currently selected element.

EDIT:

You can also directly assign the parent window's angular object to the child's definition (though I wouldn't recommend it if the parent is using angular itself)

window.angular = w.angular

This makes the parent effectively transparent, so you can use angular as normal

angular.element($0).scope()

and it has the advantage of fixing angular console tools like Batarang

Note: the iframe must be from the same origin in order for this to work. For instance, trying this in plunker won't work as the iframe is generated dynamically, and has a source of "about:blank".

Upvotes: 1

Bluebaron
Bluebaron

Reputation: 2516

Late to the party. What I do is put a button in the directive and attach it to a function that prints the scope.

<button ng-click="echoScope()">Echo Scope</button>

$scope.echoScope = function() { console.debug($scope); };

Upvotes: 0

bp4D
bp4D

Reputation: 961

Select iframe from debug options and do something like below:

jQuery('#my_element_id').scope();

To do this with javascript, I have setup a plunker link: http://plnkr.co/edit/whVo7wanhmcUfC7Nem9J?p=preview

Below js method access the scope of a element and passes to the parent method:

var passScopeToParent = function() {
  var scope = angular.element(jQuery("#myListItem")).scope();
  parent.change(scope);
}

parent widnow method accesses scope and changes its expressions:

var change = function(scope) {
  scope.$apply(function() {
    scope.department = 'Superhero';
  });
}

You can tweak this link to access the scope an element within iframe from parent window and print it in the console window.

Upvotes: 0

Related Questions