角度范围变量未绑定到 iframe答案

【问题标题】：angular Scope variable is not binding in to iframe角度范围变量未绑定到 iframe
【发布时间】：2018-01-28 14:56:49
【问题描述】：

我正在创建隐藏 iframe 以打印一些数据，但我的代码无法正常工作，我想通过使用 angular 范围变量在该 iframe 中显示一些数据，下面是我的代码。

        // print attached contract documnet
    function print(imageData) {
        var hiddenFrame = $('<iframe style="display: none"></iframe>').appendTo('body')[0];
        hiddenFrame.contentWindow.printAndRemove = function () {
            hiddenFrame.contentWindow.print();
            $(hiddenFrame).remove();
        };

        $scope.testObj = 'testing';
        var element = $compile('<div> {{testObj}} </div>')($scope);
        // var element = $compile($('<div> <img ng-src="{{ vm.contractDetails.contractAttachment.imageSRC }}" class="img-thumbnail img-responsive img-height " style="height:500px;cursor:pointer;" /> </div>'))(printScope);


        var htmlDocument = "<!doctype html>" +
            "<html>" +
            '<body onload="printAndRemove();">' +
            element.html() +
            '</body>' +
            "</html>";
        var doc = hiddenFrame.contentWindow.document.open("text/html", "replace");
        doc.write(htmlDocument);
        doc.close();
    }

然后输出不正确

$scope.testObj 绑定不正确。

【问题讨论】：

标签： javascript html angularjs iframe

【解决方案1】：

我想通过使用角度范围在该 iframe 中显示一些数据变量

简答

关于您的配置，您不能将$scope 传递给 iframe。

从图片中，角度没有加载到 iframe 中

[编辑 1]

如果您想将 base64 图像传递给 iframe，则不需要 angular。

只要打电话：

<iframe src="data:application/pdf;base64,BINARY_DATA"></iframe>

如果你想改用ng-src，为了摆脱跨域问题使用$sce服务：

<iframe  ng-src="{{someStuff}}"></iframe>

$scope.someFrame= $sce.trustAsResourceUrl("http://www.yourURL.com");

[编辑 2]

 <iframe src="{{value}}"> </iframe>

控制器

app.controller('ctrlRead', function ($scope, $sce) {
    $scope.value= $sce.trustAsResourceUrl("data:image/gif;base64,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");    
});

DEMO Fiddle

【讨论】：

我想将base64图像传递给那个iframe你能帮我举个例子吗
@Developerzzz 为什么不：<iframe src="data:application/pdf;base64,BASE64_DATA"></iframe>
其抛出错误拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“default-src 'self '”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-3OhP26JdEsfg9Rve2efgdPuBHAzVr+ns7nzZ7A70s1w=”）或随机数（“nonce-...”）。另请注意，'script-src' 未显式设置，因此 'default-src' 用作后备。
@Developerzzz 见编辑 2

【解决方案2】：

改为写

var doc = hiddenFrame.contentWindow.document.open("text/html", "replace");
doc.write(htmlDocument);
doc.close();

使用ngBindHtml

$scope.myHtml  = $sce.trustAsHtml(data.html);

在hiddenFrame中，添加一个placeHolder变量{{myHtml}}。

它会起作用的。

【讨论】：