Existe-t-il un moyen de lier un modèle ng ou une usine à un iframe en mode conception

J'essaie de créer un éditeur très très basique qui vous permet d'écrire en gras, d'ajouter des liens, d'ajouter des listes non ordonnées et des images, et c'est tout. J'ai configuré mon contrôleur mais je me demandais comment lier une usine ou une variable à l'iframe de sorte que lorsque je taperais que la variable qui stocke le html est mise à jour?

Voici l'application de base html

<!DOCTYPE html> <html lang="en" ng-app="HtmlEditor"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/angular/angular.min.js"></script> <script src="lib/angular-sanitize/angular-sanitize.min.js"></script> <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css"> <script src="js/app.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body ng-controller="AppCtrl as app"> <div class="header"> Email Creator </div> <div class="row-fluid"> <div class="col-md-5"> <form action="" set-url="controller"> <div class="form-group"> <label for="">Subject</label> <input type="text" name="subject" class="form-control" ng-model="app.settings.subject"> </div> <div class="form-group"> <label for="">Title</label> <input type="text" name="title" class="form-control" ng-model="app.settings.title"> </div> <div class="form-group"> <label for="">Signature</label> <input type="text" name="signature" class="form-control" ng-model="app.settings.signature"> </div> <div class="editor"> <div html-editor="richText"></div> </div> </form> </div> <div class="col-md-7"> <div preview> </div> </div> </div> </body> </html> 

Voici la partie du fichier app.js qui est pertinente pour la question, le reste n'est qu'un échafaudage pour d'autres directives et contrôleurs pour prendre en charge la fonctionnalité

 var app = angular.module("HtmlEditor", ['ngSanitize']) .factory("Settings", function(){ var settings = { } settings.setUrl = function(url){ settings.url = url+".cfc"; } return settings; }) .controller("AppCtrl", function(Settings){ var appCtrl = this; appCtrl.settings = Settings; appCtrl.filter = function(){ } }) .directive("htmlEditor", function(Settings){ return { restrict:"A", scope:{ htmlEditor:"@" }, controller:"AppCtrl", replace:true, template:'<iframe name="{{::htmlEditor}}" id="{{::htmlEditor}}"></iframe>', link:function(scope, element, attr, appCtrl){ console.log(element.contents()) element.contents()[0].designMode = "On"; /*var iframeDocument = element[0].contentDocument || element[0].contentWindow.document; iframeDocument.designMode = "On";*/ appCtrl.settings.editor = element.contents()[0]; console.log(appCtrl.settings.editor); } } }) 

C'est ainsi que je l'ai fait fonctionner, il imite essentiellement la fonctionnalité ngModel. Je viens d'afficher la réponse au cas où quelqu'un d'autre essayait de faire quelque chose de semblable et ne pouvait pas le comprendre.

 return { restrict:"A", scope:{ htmlEditor:"@" }, require:"ngModel", replace:true, template:'<iframe name="{{::htmlEditor}}" id="{{::htmlEditor}}"></iframe>', link:function(scope, element, attr, ngModel){ console.log(element.contents()) var editor = element.contents()[0]; editor.designMode = "On"; Settings.editor = editor; console.log(ngModel); Settings.body = element.contents().children().find('body'); element.contents() .bind("blur keyup change", function() { scope.$apply(function(){ Settings.isEmpty = !Settings.body.html().length > 0; console.log(Settings.isEmpty); Settings.html = Settings.body.html(); }); }); } } 

Existe-t-il une raison pour laquelle vous avez l'iframe dans la directive?

Ce que j'ai fait dans le passé, c'est l'URL définie dans une variable de portée.

 <iframe name="pdfIframe" ng-src="{{currentLeadSheetUrl}}" id="pdfIframe" width="80%" height="500px" ></iframe>