8

So...for example, I am trying to pull in an email "template" into an iframe as a "preview" for the user inside of an angularjs app. The iframe lives inside of the controller area (let's call it MainCtrl). The user would then be able to, using the form elements provided inside MainCtrl, update the preview based on their input. So for example let's say our template being pulled into the iframe looks something like this:

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style type="text/css">
    .some {styles: here};
    </style>
</head>

<body>
    <h1>{{header}}</h1>

    <p>{{body}}</p>

</body>

</html>

So inside our index.html (angularjs app), we would have form elements bound to {{header}} and {{body}}... 

<div ng-controller="MainCtrl">
    <input type="text" ng-model="header" placeholder="header text" />
    <input type="text" ng-model="body" placeholder="body text" />
    <iframe src="template.html" width="800" height="1500"></iframe>
</div>

is that possible? Is it possible for angularjs to update that information, and if so, how? I have something similar setup, and seems that it will not work. I cannot get the angularjs expressions to evaluate...all that shows up is {{body}}, etc...

kevindeleon
  • 1,914
  • 3
  • 18
  • 30

2 Answers2

12

If you run the iframe and the parent document from the same domain name (so that no Cross-Site-Scripting-Restrictions apply) then you can call a JavaScript function in the iframe which you could pass data.

What you might be missing is that the iframe is a separate document from the viewpoint of the browser. So if this iframe should run AngularJS code, you will need to make it a separate AngularJS application.

Here is a example where both the parent document and the iframe are separate AngularJS applications and the value of a text input in the parent is sent upon change to the iframe where the AngularJS application running there will put the data into the scope.

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

Juliane Holzt
  • 2,135
  • 15
  • 14
  • Exactly what I was looking for. I guess I just wasn't sure if Angularjs did some background processing and included the additional viewport in its scope by default. This clears things up, and thanks for the plnkr...very clear. – kevindeleon Oct 02 '13 at 13:56
  • 1
    I also want something like this but my situation is opposite. I want to update data of page from iframe. Is it possible? – ap.singh Nov 29 '13 at 08:07
  • Yes, you only need to reference the parent page from the iframe in this case. I have not looked it up, but something like window.parent shall work. – Juliane Holzt Nov 29 '13 at 10:44
  • For archive purpose: to call parent function from iframe just do parent.someChildsFunction(); (from http://stackoverflow.com/questions/18437594/angularjs-call-other-scope-which-in-iframe) – leticia Sep 19 '14 at 05:37
0

From the standpoint of the browser there is nothing special about angular - this is javascript, that's all that matters. So I would say the answer to your questions is - yes, it should work.

Of course the constrains of the same origin policy will apply. Also asynchronicity may present some problems, but other than that it just should work

mfeingold
  • 7,094
  • 4
  • 37
  • 43
  • I guess I am not asking if it will work...I am asking how to do it...I have basically a more complicated version of what I described in place, and the expressions are not evaluating inside of the iframe...if you know how to do it, feel free to explain a bit further. – kevindeleon Oct 01 '13 at 21:12
  • Well, whatever you do, you will need to make the iframe also an AngularJS application/instance if you want to have its magic working there. The parent window can also be a AngularJS application but it will always be a separate one. You will need to pass data between the two instances, see also my example. – Juliane Holzt Oct 01 '13 at 22:03