web-dev-qa-db-fra.com

Angularjs: appelle d'autres portées qui, dans iframe

Dans mon test, donné 2 document, A et B. Dans un document, il y a un iframe, la source de l'iframe est un document B. Ma question est de savoir comment modifier le document B certaine portée de la variable?

Voici mon code: Un document

<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
  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());
    }
}

  </script>
</head>
<body>

<div ng-controller="test">
        <div id="cont" >
            <button ng-click="tryget()">try</button>
        </div>
</div>
<iframe src="test2.html" id="iframe"></iframe>

</body>
</html>

Mon document B:

<!doctype html>
<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
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);
    }
}

  </script>
</head>
<body>

<div ng-controller="test2" id="test2">
        <div id="cont" >
            <button ng-click="parentcall()">get script</button>
        </div>
        {{tempvalue}}
</div>

</body>
</html>

Remarque: En fait, il existe un moyen de le faire, ce qui me semble être un hack plutôt qu'un moyen approprié de le faire. Après cela, un document "déclenche", cliquez sur le bouton.

javascriptangularjsangularjs-scope
24
Stupidfrog

Pour accéder et communiquer dans deux directions (parent vers iFrame, iFrame vers parent), si elles appartiennent au même domaine et ont accès à la portée angulaire, procédez comme suit: 

* Vous n’avez pas besoin que le parent fasse référence à la bibliothèque angularJS…

Appel à l'enfant iFrame du parent

1.Obtenez l'élément enfant iFrame du parent ( lien pour répondre ): 

document.getElementById ("myIframe"). contentWindow

2. Accédez à la portée de l'élément: 

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

3.Appelez la fonction ou la propriété du scope: 

document.getElementById ("myIframe"). contentWindow.angular.element ("# someDiv"). scope (). someAngularFunction (data);

4.Call $ scope. $ S’applique après avoir exécuté la logique de la fonction/mis à jour la propriété ( lien vers la réponse de Mishko ): 

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

  • Une autre solution consiste à partager la portée entre les iFrames, mais vous devez alors définir angular des deux côtés: ( lien pour répondre et exemple )

Appel du parent de l'enfant iFrame

  1. Appeler la fonction parent: 

parent.someChildsFunction ();

Mettra à jour également sur la façon de le faire entre domaines si nécessaire.

46
Urigo

Vous devriez pouvoir obtenir la portée parent d'iFrame:

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

Ensuite, vous pouvez appeler la méthode parent ou modifier la variable parent (mais n'oubliez pas d'appeler parentScope.$apply pour synchroniser les modifications)

Testé sur angulaire 1.3.4

13
Yiding

Dans mon esprit, le meilleur moyen de communiquer avec l'iframe est d'utiliser window.top. Si vous souhaitez que votre iframe obtienne la portée de votre parent, vous pouvez définir window.scopeToShare = $scope; dans votre contrôleur et il devient accessible pour la page iframe à window.top.scopeToShare.

Si vous voulez que votre parent obtienne la portée d'iframe, vous pouvez utiliser

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

et dans l'appel du contrôleur iframe window.top.giveRootScope($rootScope);

AVERTISSEMENT: si vous utilisez ce contrôleur plusieurs fois, veillez à utiliser un ID supplémentaire pour identifier l'étendue souhaitée.

3
Benoit Tremblay

Celui-ci est assez simple et fonctionne pour moi:

dans le code du contrôleur de la page iframe:

$window.parent.window.updatedata($scope.data);

dans le code du contrôleur de page parent:

window.updatedata = function (data) {
 $scope.$apply(function () {
     $scope.data = data
   }
 }
0
Erjan Kelder