角度 iFrame 方法答案

【问题标题】：Angular iFrame methods角度 iFrame 方法
【发布时间】：2015-03-09 12:13:04
【问题描述】：

我正在尝试制作一个 Angular 指令来包装 iFrame。因为 IE 11 不支持 srcdoc 属性，所以我寻找了另一种填充 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();
             });
        }
    };
}

这失败了，因为我得到的 $element 是一个没有 open 方法的 Angular jQueryLite 对象。如何以 Angular 方式访问 DOM 元素，而不使用 querySelector？

【问题讨论】：

我得到了错误的结论，实际的 iFrame DOM 元素位于 element[0].contentWindow.document。我可以回答和/或“关闭”我自己的问题吗？
回答你自己的问题 - that is fine!

标签： angularjs iframe element directive

【解决方案1】：

我遇到了类似的问题，但希望能够将注入 iframe 的内容仍然绑定到包含的角度范围。我写了一个指令来处理这个问题，可以在这里找到：http://plnkr.co/edit/KRfAyc5haHyFq7FyCnxg?p=preview

它是这样使用的：

<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>

并产生以下内容：

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

【讨论】：