Angularjs: chama outro escopo que no iframe

No meu teste, dado 2 documento, A e B. Em um documento, há um iframe, a fonte iframe é um documento B. Minha pergunta é como modificar o documento B determinado escopo da variável?

Aqui está o meu código: um documento

   Google Phone Gallery    var g ; function test($scope,$http,$compile) { $scope.tryget = function(){ var iframeContentWindow = $("#iframe")[0].contentWindow; var iframeDOM = $("#iframe")[0].contentWindow.document; var target = $(iframeDOM).find("#test2"); var iframeAngular = iframeContentWindow.angular; var iframeScope = iframeAngular.element("#test2").scope(); iframeScope.parentcall(); iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ; iframeScope.tempvalue = 66; iframeContentWindow.tt = 22; iframeScope.parentcall(); console.log(iframeScope.tempvalue); console.log(angular.element("#cont").scope()); } }    

Meu documento B:

     Google Phone Gallery    var tt =11; function test2($scope,$http,$compile) { console.log("test2 controller initialize"); $scope.tempvalue=0; $scope.parentcall = function() { $scope.tempvalue = 99 ; console.log($scope.tempvalue); console.log(tt); } }    
{{tempvalue}}

Nota: Na verdade, há alguma maneira de fazer isso, o que eu sinto como um hack em vez de uma maneira correta de fazê-lo: isso é criar um botão em b Document e vincular com angularjs ng-click. Depois disso um documento jquery “gatilho” clique no botão.

Para acessar e se comunicar em duas direções (pai para iFrame, iFrame para pai), caso ambos estejam no mesmo domínio, com access ao escopo angular, tente seguir as etapas a seguir:

* Você não precisa que o pai tenha referência à biblioteca angularJS…

Chamando para filho iFrame do pai

1.Get filho iFrame elemento do pai ( link para responder ):

document.getElementById (“myIframe”). contentWindow

2. Acesse o escopo do elemento:

document.getElementById (“myIframe”). contentWindow.angular.element (“# someDiv”). scope ()

3. Chame a function ou propriedade do escopo:

document.getElementById (“myIframe”). contentWindow.angular.element (“# someDiv”). scope (). someAngularFunction (dados);

4.Call $ scope. $ Aplicar depois de executar a lógica da function / atualizar a propriedade ( link para a resposta da Mishko ):

$ scope. $ apply (function () {});

  • Outra solução é compartilhar o escopo entre os iFrames, mas então você precisa de um ângulo em ambos os lados: ( link para responder e exemplo )

Chamando pai de filho iFrame

  1. Chamando a function pai:

parent.someChildsFunction ();

Vai atualizar também sobre como fazer o domínio cruzado, se for necessário ..

Você deve conseguir obter o escopo pai do iFrame:

 var parentScope = $window.parent.angular.element($window.frameElement).scope(); 

Então você pode chamar o método pai ou alterar a variável pai (mas lembre-se de chamar parentScope.$apply para sincronizar as mudanças)

Testado no Angular 1.3.4

A melhor maneira de me comunicar com o iframe é usando window.top. Se você quiser que seu iframe obtenha o escopo de seu pai, você pode definir window.scopeToShare = $scope; dentro de seu controlador e ele se torna acessível para a página iframe em window.top.scopeToShare .

Se você quiser que seu pai receba o escopo de iframe, você pode usar

 window.receiveScope = function(scope) { scope.$on('event', function() { /* Treat the event */ } }; 

e dentro da chamada do controlador de iframe window.top.giveRootScope($rootScope);

AVISO: Se você estiver usando este controlador várias vezes, certifique-se de usar um ID adicional para identificar o escopo desejado.