Angular iFrame方法 [英] Angular iFrame methods

问题描述

我正在尝试制作一个Angular指令来包装iFrame。因为IE 11不支持srcdoc属性，所以我寻找一种不同的方式来填充iFrame：

  angular 
 .module（'angularApp'）
 .directive（'easyframe'，easyframe）; 
 
函数easyframe（）{
 return {
 restrict：'E'，
范围：{content：'='}，
替换：true ，
模板：'< iframe id =easyframewidth =100％>< / iframe>'，
控制器：函数（$ sce，$ scope，$ element）{
 $ scope。$ watch（'content'，function（）{
 var content = $ sce.trustAsHtml（$ scope.content）; 
 var iframeDocument = $ element [0]; 
 
 iframeDocument.open（'text / html'，'replace'）; 
 iframeDocument.write（content）; 
 iframeDocument.close（）; 
}）; 
} 
}; 
} 
  

这会失败，因为我得到的$元素是一个Angular jQueryLite对象，它没有'有开放的方法。如何使用Angular方式获取DOM元素，所以不使用querySelector？

解决方案

我遇到了类似的问题，但是希望能够将注入iframe的内容仍绑定到包含的角度范围。我写了一个指令来处理这个问题，可以在这里找到：

框架模板和框架-selector 是可选的。它们允许将文件（由 frame-template 指定）加载到框架中，并将内容注入框架中的元素，由框架选择器指定。

I'm trying to make an Angular directive to wrap an iFrame. Because IE 11 doesn't support the srcdoc attribute I looked for a different way to fill the iFrame:

angular
    .module('angularApp')
    .directive('easyframe', easyframe);

function easyframe() {
    return {
        restrict: 'E',
        scope: {content: '='},
        replace: true,
        template: '<iframe id="easyframe" width="100%"></iframe>',
        controller: function ($sce, $scope, $element) {
            $scope.$watch('content', function () {
                var content = $sce.trustAsHtml($scope.content);
                var iframeDocument = $element[0];

                iframeDocument.open('text/html', 'replace');
                iframeDocument.write(content);
                iframeDocument.close();
             });
        }
    };
}

This fails because the $element I get is a Angular jQueryLite object that doesn't have the open method. How do I get to the DOM element the Angular way, so without using querySelector?

解决方案

I ran across a similar problem, but wanted to be able to have the content that is injected into the iframe still be bound to the containing angular scope. I wrote a directive to handle this, which can be found here: http://plnkr.co/edit/KRfAyc5haHyFq7FyCnxg?p=preview

It is used like so:

<wrap-in-frame frame-template="frame-template.html" frame-selector="div" height="200" style="border-width: 5px; width: 100%;">
  Angular Interpolated Data: {{ data }}
  <div>NgModel Data Binding: <input ng-model="data" type="text" /></div>
</wrap-in-frame>

<div>
  Outside frame binding:
  <input ng-model="data" type="text" />
</div>

And produces the following:

The frame-template and frame-selector are optional. They allow loading a file (specified by frame-template) into the frame and injecting the content into an element in the frame, specified by frame-selector.

这篇关于Angular iFrame方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！