Czy można zaktualizować wyrażenia angularjs wewnątrz ramki iframe?

Więc ... na przykład, próbuję wciągnąć "szablon" e-maila do iframe jako "podgląd" dla użytkownika wewnątrz aplikacji angularjs. Iframe mieszka wewnątrz obszaru kontrolera (nazwijmy to MainCtrl). Użytkownik będzie wtedy w stanie, korzystając z elementów formularza dostępnych w MainCtrl, zaktualizować podgląd na podstawie ich danych wejściowych. Załóżmy na przykład, że nasz szablon wciągnięty do ramki iframe wygląda mniej więcej tak:

<!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>

Więc w naszym pliku index.html (angularjs), mielibyśmy elementy formularza powiązane z {{header}} i {{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>

czy to jest możliwe? Czy Angularjs może aktualizować te informacje, a jeśli tak, to w jaki sposób? Mam coś podobnego i wydaje się, że nie będzie działać. Nie mogę ocenić wyrażenia angularjs ... wszystko, co się pojawia, to {{body}}, itd ...

questionAnswers(2)

yourAnswerToTheQuestion