在AngularJs中父子页面如何相互调用方法和接收值

JavaScript08

在AngularJs中父子页面如何相互调用方法和接收值,第1张

因为AngularJs用的人不多,我发现网上关于这方面的文章不多,所以我分享一下在AngularJs中是如何调用和接收的。

<app-dialog></app-dialog>其中dialog是子页面文件夹的名字,只需要把这个标签放在父页面中需要的地方即可。[sessionId]='sessionId',sessionId是父页面中的值,需要传到子页面中去的,父页面中的sessionId是需要定义的,而子页面需要这样来接收父页面中的sessionId,

'#dialogfile'相当于给子页面添加了一个id,在父页面中可以直接通过这个id来接收子页面的值和调用子页面的方法(如果是调用子页面的方法的话,方法名后面是需要加括号的),在父页面中需要这样来定义,

最后是子页面调用父页面的方法。

其中'this'指的就是父页面,而[parent]则是需要在子页面定义的一个名字可以随意更改,

记住调用父页面的方法,方法名后面是需要加括号的,如果有参数的话,直接写在括号里面就好。

 JS子窗口调用父窗口的方法:

 框架(iframe)形式,这时用到是window.parent, window.parent能获取一个框架的父窗口或父框架。顶层窗口的parent引用的是它本身。可以用这一点特性来判断这个窗口是否是顶层窗口。详情如下:

1、1.html代表的是父窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>父页面</title>

</head>

<body>

<form name="form1" id="form1"> 

   <input type="text" name="username" id="username" /> 

</form> 

<iframe src="2.html" width="100%">

</body>

</html

2、2.html代表的子窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>子页面</title>

<script type="text/javascript">

 function changeValue(val){

  var _parentWin = window.parent   

  _parentWin.form1.username.value = val 

 }

</script>

</head>

<body>

<input type="file" name="filename" onchange="changeValue(this.value)" />

</body>

</html>

这时在子窗口(iframe窗口)所做的改变,会改变父窗口中username的值。