AngularJS - 更改 iframe 或类似内容中的内容答案

【问题标题】：AngularJS - Change content in iframe or similarAngularJS - 更改 iframe 或类似内容中的内容
【发布时间】：2013-12-17 08:48:08
【问题描述】：

这是一个JSFiddle 开头。

HTML

<iframe id="iframe" src="http://fiddle.jshell.net/"></iframe>
<div id="test">click me</div>

jQuery

$( "#test" ).on( "click", function() {
    var iframe = $("#iframe").contents();
    iframe.find('#header').css('background-color', 'red');
    iframe.find('#header').html('My content');
});

CSS

iframe {
    height: 500px;
    width: 800px;
}

问题

在上面的示例中，我可以使用 jQuery 毫无问题地编辑 iframe 的 DOM 内容。
AngularJS 也能做到这一点吗？例子？
如果不行，用ngInclude可以吗？例子？

【问题讨论】：

标签： javascript angularjs iframe

【解决方案1】：

简单尝试

<iframe id="iframe"  src="./data-model.html" my-iframe></iframe>
var app = angular.module("myTestIframe", []);
            app.controller('MyCtrl',function($scope){

            });
            app.directive("myIframe", function() {
                return {
                    restrict: "A",
                    link: function (scope,element) {
                        console.log(element.css('background-color', 'red'));
                    }

                }
            });

如果您包含 jquery 库，您还可以使用 $(element) 管理元素

【讨论】：