AngularJS - Изменить содержимое в iframe или аналогичном

Question

Для начала введите 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; 
} 

Ques Тион

• В приведенном выше примере я могу с JQuery, редактировать содержание РОМ в IFRAME без каких-либо проблем.
• Можно ли это сделать с помощью AngularJS? Пример?
• Если нет, это можно сделать с помощью ngInclude? Пример?

Answer 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 библиотеку можно также управлять элемент с $ (элемент)