0
我想在一个iframe的Angular 1.2中显示一些HTML,但我没有一个URL,而是我有一个变量中的内容。如何显示它?
$scope.serverMessage = $sce.trustAsHtml(data);
$scope.switchMessage('serverError'); // this displays a modal with iframe in it
我想在一个iframe的Angular 1.2中显示一些HTML,但我没有一个URL,而是我有一个变量中的内容。如何显示它?
$scope.serverMessage = $sce.trustAsHtml(data);
$scope.switchMessage('serverError'); // this displays a modal with iframe in it
我做了一个指令,这个......这是很丑陋的,但你可以得到依据和清理,如果你愿意的话。
.directive('dynamicIFrame', function($document){
return {
restrict:'E',
scope:{
html:"="
},
link:function(scope, iElem, iAttr){
// Create an IFrame and add it to the current element
var iframe = $document[0].createElement("iframe");
iframe.style.width="98%"
iframe.style.height="500px"
iElem.append(iframe);
// Do some things to get a DOM Document out of the iframe
var doc = iframe.document;
if(iframe.contentDocument){
doc = iframe.contentDocument;
}
else if(iframe.contentWindow){
doc = iframe.contentWindow.document;
}
// watch whatever gets passed into here as HTML so the
// iframe contents will just update if the HTML changes
// uses lodash's debounce function to delay updates by 250ms
scope.$watch('html', _.debounce(function(newVal,oldVal){
console.log('html changed')
if(!newVal)
return;
doc.open();
doc.writeln(newVal);
doc.close();
}, 250),
true);
}
}
})
你会使用它像
<dynamic-i-frame html="someVarWithHTMLInIt"></dynamic-i-frame>
也可能注意到这不是在做它的写作到文档中的信息进行任何验证,所以如果这将是东西,用户可以输入该数据将显示在网站上,您也可以使用$ sce中的某些组件进行查看。