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 () {});
Chamando pai de filho iFrame
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.