Angularjs: appeler d'autres scope qui dans iframe
dans mon test, donné 2 document, A et B. Dans un document, il y a une iframe, la source d'iframe est le document B. Ma question Est de savoir comment modifier un document B pour une certaine portée de 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>
My B document:
<!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>
Note: En fait il y a un moyen de le faire, que je sens comme un hack au lieu de la bonne façon de le faire: c'est créer un bouton dans le Document b, puis lier avec angularjs ng-cliquez. Après cela, un document jquery "trigger" cliquez sur le bouton.
3 réponses
pour accéder et communiquer dans deux directions (parent à iFrame, iFrame à parent), dans le cas où ils sont tous les deux dans le même domaine, avec accès à la portée angulaire, essayez de suivre ces étapes:
*Vous n'avez pas besoin du parent de faire référence à angularJS la bibliothèque...
Appel à l'enfant iFrame du parent
1.Obtenez de l'enfant iFrame élément de la mère ( "151990920 lien" répondre ):
document.getElementById ("myIframe").contentWindow
2.Accédez à la portée de l'élément:
document.getElementById ("myIframe").contentWindow.anguleux.element ("#someDiv").champ d'application ()
3.Appelez la fonction ou la propriété de la portée:
document.getElementById ("myIframe").contentWindow.anguleux.element ("#someDiv").portée.)(someAngularFunction (data);
4.Appelons $champ d'application.$ apply après avoir exécuté la logique de la fonction / mise à jour de la propriété ( lien vers la réponse de Mishko ):
$champ d'application.$s'appliquent(function () { });
- une autre solution est de partager la portée entre les iFrames, mais alors vous avez besoin angulaire dans les deux côtés: ( lien pour répondre et exemple )
l'Appel des parents de l'enfant iFrame
- appelant la fonction parent:
parent.someChildsFunction ();
mettra à jour également sur la façon de le faire cross domaine si elle est nécessaire..
vous devriez être en mesure d'obtenir la portée parent de iFrame:
var parentScope = $window.parent.angular.element($window.frameElement).scope();
alors vous pouvez appeler la méthode parent ou changer la variable parent( mais n'oubliez pas d'appeler parentScope.$apply pour synchroniser les changements)
testé sur L'angle 1.3.4
la meilleure façon de communiquer avec l'iframe est d'utiliser window.haut. Si vous voulez que votre iframe obtienne le scope de votre parent, vous pouvez définir window.scopeToShare = $scope; dans votre controller et il devient accessible pour la page iframe à window.top.scopeToShare .
si vous voulez que votre parent obtienne le champ iframe, vous pouvez utiliser
window.receiveScope = function(scope) {
scope.$on('event', function() {
/* Treat the event */
}
};
et dans le contrôleur iframe appel window.top.giveRootScope($rootScope);
avertissement: si vous utilisez ce contrôleur plusieurs fois, assurez-vous d'utiliser un ID supplémentaire pour identifier quel scope vous voulez.