AngularJS - change content in iframe or similar

Question

Here is a JSFiddle to get you started.

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

Question

• In the above example, I can edit the contents of the DOM iframe with jQuery without any problems.
• Can this be done using AngularJS? Example?
• If not, can this be done with ngInclude ? Example?

Answer 1

Just try

<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'));
                    }

                }
            });

If you include the jquery library, you can also control the element with $ (element)