有没有NG-模型或工厂绑定在设计模式的iframe的方式 [英] Is there a way to bind ng-model or a factory to an iframe in design mode
本文介绍了有没有NG-模型或工厂绑定在设计模式的iframe的方式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个非常非常基本的编辑器，允许你大胆的文字，添加链接，添加无序列表和图像，这就是它。设置我的控制器，但我想知道你会如何工厂或变量绑定到的iframe这样，当我在其中键入所存储的HTML变量更新？
下面是基本应用HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=HTML编辑＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;文件＆LT; /标题＆GT;
＆所述; SCRIPT SRC =LIB /角度/ angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =LIB /角的sanitize /角sanitize.min.js＆GT;＆下; /脚本＆GT;
＆LT;链接rel =stylesheet属性HREF =LIB /引导/距离/ CSS / bootstrap.min.css＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / style.css文件＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=AppCtrl为app＆GT;
＆LT; DIV CLASS =头＆GT;
电子邮件造物主
＆LT; / DIV＆GT;
＆LT; DIV CLASS =排液＆GT;
＆LT; DIV CLASS =COL-MD-5＆GT;
＆LT;形式的行动=设置URL =控制器＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=＆GT;受试对象; /标签＆gt;
＆LT;输入类型=文本名称=主题类=表格控NG模型=app.settings.subject＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=＆GT;标题＆LT; /标签＆gt;
＆LT;输入类型=文本名称=标题级=表格控NG模型=app.settings.title＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=＆GT;签署及LT; /标签＆gt;
＆LT;输入类型=文本名称=签名级=表格控NG模型=app.settings.signature＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =编辑器＆GT;
＆LT; DIV HTML编辑器=富文本＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-7＆GT;
＆LT; DIV preVIEW＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这里是app.js文件的组成部分，是有关剩下的只是脚手架其他指令和控制器支持功能的问题。
VAR应用= angular.module（HTML编辑，['ngSanitize']）.factory（设置，函数（）{
VAR设置= { } settings.setUrl =功能（URL）{ settings.url = URL +CFC。 } 返回设置;
}）.controller（AppCtrl功能（设置）{
VAR appCtrl =这一点; appCtrl.settings =设置; appCtrl.filter =功能（）{ }}）.directive（HTML编辑功能（设置）{ 返回{
限制：A，
范围：{
HTML编辑：@
}，
控制器：AppCtrl
更换：真实，
模板：'＆LT; IFRAME NAME ={{:: HTML编辑}}ID ={{:: HTML编辑}}＆GT;＆LT; / IFRAME＆GT;，
链接：功能（范围，元素，属性appCtrl）{
的console.log（element.contents（））
element.contents（）[0] = .designMode开;
/ *变种iframeDocument =元素[0] .contentDocument ||元素[0] .contentWindow.document;
iframeDocument.designMode =开; * /
appCtrl.settings.editor = element.contents（）[0]; 的console.log（appCtrl.settings.editor）;
}
}}）
解决方案
这是我得到了它的工作，它基本上模拟了ngModel功能。我刚刚张贴以防其他人试图做类似的事情，不能弄明白答案。
{回报
限制：A，
范围：{
HTML编辑：@
}，
要求：ngModel
更换：真实，
模板：'＆LT; IFRAME NAME ={{:: HTML编辑}}ID ={{:: HTML编辑}}＆GT;＆LT; / IFRAME＆GT;，
链接：功能（范围，元素，属性ngModel）{
的console.log（element.contents（））
变种编辑= element.contents（）[0];
editor.designMode =开;
Settings.editor =编辑; 的console.log（ngModel）;
。Settings.body = element.contents（）儿童（）找到（'身体'）; element.contents（）
.bind（模糊KEYUP变，函数（）{ 范围。$应用（函数（）{ Settings.isEmpty = Settings.body.html（）长度GT！。 0;
的console.log（Settings.isEmpty）;
Settings.html = Settings.body.html（）; }）; }）;
}}
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.
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();
});
});
}
}
这篇关于有没有NG-模型或工厂绑定在设计模式的iframe的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
