Angularjs: iframe에서 다른 스코프를 호출합니다.
제 시험에서는 A와 B 두 개의 서류가 주어졌습니다.A 문서에는 iframe이 있고, iframe 소스는 B 문서입니다.제 질문은 B 문서의 특정 범위의 변수를 어떻게 수정할 것인가 하는 것입니다.
여기 내 코드가 있습니다.서류를
<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>
나의 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>
참고: 실제로 그것을 할 수 있는 방법이 있는데, 나는 그것을 하기 위한 적절한 방법 대신 해킹이라고 생각합니다. 그것은 b 문서에 버튼을 만든 다음 angularjs ng-click으로 바인딩하는 것입니다.그런 다음 문서 쿼리 "트리거" 단추를 클릭합니다.트리거) 버튼을 클릭합니다.
두 방향(parent to iFrame, iFrame to parent)으로 액세스하고 통신하려면, 두 방향(parent to iFrame, iFrame to parent)에서 각도 범위에 액세스할 수 있도록 다음 단계를 수행합니다.
*부모가 각진 부위를 참조할 필요는 없습니다JS 라이브러리...
부모에서 자식 iFrame으로 호출
1. 부모로부터 자식 iFrame 요소 가져오기(응답 링크):
document.getElementById("myIframe").content 창
2. 요소의 범위에 접근합니다.
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope()
3. 스코프의 기능 또는 속성을 호출합니다.
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope().someAngularFunction(데이터);
4. $scope에 전화하세요.$ 함수의 논리를 실행한 후/속성을 업데이트한 후 적용(Mishko의 답변 링크):
$scope.$apply(함수() {});
자식 iFrame에서 부모 호출
- 상위 기능 호출:
parent.some Childs Function();
필요한 경우 도메인 간에 수행하는 방법에 대해서도 업데이트할 예정입니다.
iFrame에서 상위 범위를 가져올 수 있어야 합니다.
var parentScope = $window.parent.angular.element($window.frameElement).scope();
그러면 상위 메서드를 호출하거나 상위 변수를 변경할 수 있습니다(그러나 호출해야 함).parentScope.$apply변경 사항을 일치시키다)
각도 1.3.4에서 테스트됨
iframe과 소통하는 가장 좋은 방법은 window.top을 사용하는 것입니다.iframe이 부모의 범위를 가져오려면 다음을 설정할 수 있습니다.window.scopeToShare = $scope;컨트롤러 내에서 iframe 페이지에 액세스할 수 있게 됩니다.window.top.scopeToShare.
부모가 iframe 범위를 얻으려면
window.receiveScope = function(scope) {
scope.$on('event', function() {
/* Treat the event */
}
};
iframe 컨트롤러 호출 내에서window.top.giveRootScope($rootScope);
경고: 이 컨트롤러를 여러 번 사용하는 경우 추가 ID를 사용하여 원하는 범위를 식별해야 합니다.
이것은 아주 간단하며 제게 도움이 됩니다.
iframe 페이지의 컨트롤러 코드:
$window.parent.window.updatedata($scope.data);
상위 페이지 컨트롤러 코드:
window.updatedata = function (data) {
$scope.$apply(function () {
$scope.data = data
}
}
언급URL : https://stackoverflow.com/questions/18437594/angularjs-call-other-scope-which-in-iframe
'programing' 카테고리의 다른 글
| Mysql: 레코드 수를 가져옵니다. (0) | 2023.10.28 |
|---|---|
| post_date_gmt 대신 post_meta date 쿼리 (0) | 2023.10.23 |
| 안드로이드 앱에서 사용할 웹소켓 라이브러리는? (0) | 2023.10.23 |
| 커널 스레드란? (0) | 2023.10.23 |
| 스위프트에서 애니메이션에서 단순한 페이드를 만들라고요? (0) | 2023.10.23 |