{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《Is there a way to bind ng-model or a factory to an》','https://www.manongdao.com/q-1297809.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to create a very very basic editor that allows you to bold text, add links, add unordered lists, and images and that's it. I set up my Controller but I was wondering how you would bind a factory or variable to the iframe so that when I type in it that the variable that is storing the html is updated?
here is the basic app 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>
here is the part of the app.js file that is relevant to the question the rest is just scaffolding for other directives and controllers to support functionality
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);
}
}
})
this is how I got it to work the it basically emulates the ngModel functionality. I just posted the answer just in case anyone else was trying to do something similar and couldn't figure it out.
Is there a reason that you have the iframe in the directive?
What i have done in the past is set url in a scope variable.