Angular iFrame方法

时间:2015-03-09 12:13:05

标签: angularjs iframe element directive

我试图制作一个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();
             });
        }
    };
}

这会失败,因为我得到的$元素是一个Angular jQueryLite对象,它没有open方法。如何使用Angular方式获取DOM元素,因此不使用querySelector?

1 个答案:

答案 0 :(得分:2)

我遇到了类似的问题,但希望能够将注入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 Wrapping Example

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