Call controller from click within an iframe with angular

Question

I am trying to bind an event to an iframe so that no matter where in the iframe is clicked, the event fires a function in the angular controller. I am trying to do this with just the jquery lite that ships with angular, or with pure javascript, whichever solution I happen across first.

I have been trying variations on this but not having any luck:

angular.element('iframe').contents().find('html').bind('click', function () {
    alert("hello");
});

Here is one with full jquery i can deal with a solution using the entire jquery library if necessary plnkr.co/edit/wNUEbteVkRa0ZotQEY2w?p=preview — Mark
– Mark, Commented Jul 28, 2014 at 14:20

Yair Tavor · Accepted Answer · 2014-07-28 14:54:20Z

3

Well, you can't go looking for elements out of the blue like normal jquery apps. you got to use a directive.

look here : plunker demo

In myDirective, i use the iframe element to do what you wanted:

app.directive('myDirective', function(){

  return {
    link : function(scope, element, attributes){
      element.contents().find('html').bind('click', function () {
           alert("hello");
       });
    }
  };

});

You should also take some steps to ensure that the 'element' in the link function is an iframe.

answered Jul 28, 2014 at 14:54

Yair Tavor

2,5381 gold badge22 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Over a year ago

Thanks this does work in plnkr but not in my app unfortunately so I am guessing there is something blocking the click even in what is being loaded in the iframe

Collectives™ on Stack Overflow

Call controller from click within an iframe with angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related