基于Angular中ng-controller父子级嵌套的相关属性详解


Posted in Javascript onOctober 08, 2018

ng-controller是为应用变量添加控制器

当有两个控制器father、child且child 在 father内,那child 可以称为子控制器,它将继承父控制器father的scope。child就可以访问到father的scope中的所有函数和变量。

例:

<div ng-controller="father">
 <div >name1:{{ name1 }}</div>
 <div ng-controller="child">name2:{{ name2 }}</div>
</div>

情况1:

app.controller("father",function ($scope) {
 $scope.name1 = "x";
 $scope.name2 = "y";
});

页面显示结果:

name1:x 
name2:y

情况2:

app.controller("child",function ($scope) {
 $scope.name1 = "a";
 $scope.name2 = "b";
});

页面显示结果:

name1: 
name2:b:

情况3:

app.controller("father",function ($scope) {
 if($scope.name1){
  $scope.name1 += "!";
  console.log($scope.name1);
 } else {
  $scope.name1 = "@";
  console.log($scope.name1);
 }

 if($scope.name2){
  $scope.name2 += "#";
  console.log($scope.name2);
 } else {
  $scope.name2 = "$";
  console.log($scope.name2);
 }

 console.log("father");
});
app.controller("child",function ($scope) {
 if($scope.name1){
  $scope.name1 += "%";
  console.log($scope.name1);
 } else {
  $scope.name1 = "^";
  console.log($scope.name1);
 }

 if($scope.name2){
  $scope.name2 += "&";
  console.log($scope.name2);
 } else {
  $scope.name2 = "*";
  console.log($scope.name2);
 }

 console.log("child");
});

控制台打印结果:

@
$
father
@%
$&
child

页面显示结果:

name1:@
name2:$&

可以看出name1的页面显示结果与控制台打印结果不一致

结论:

父级控制器先执行而子级控制器后执行。父级和子级控制器都可对父级下scope作用域进行访问操作,但当子级控制器尝试处理父级作用域内、子级作用域外的数据则可能会导致父级中的数据变脏。

以上这篇基于Angular中ng-controller父子级嵌套的相关属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
JS实现简单日历特效
Jan 03 Javascript
vue实现简单学生信息管理
May 30 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 #Javascript
angularJs提交文本框数据到后台的方法
Oct 08 #Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 #Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 #Javascript
JS中验证整数和小数的正则表达式
Oct 08 #Javascript
You might like
PHP PDO函数库详解
2010/04/27 PHP
php中对2个数组相加的函数
2011/06/24 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
理解JavaScript中的事件
2006/09/23 Javascript
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
jquery操作select大全
2014/04/25 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
Django中url的反向查询的方法
2018/03/14 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python logging模块原理解析及应用
2020/08/13 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
2013年军训通讯稿
2014/02/05 职场文书
渡河少年教学反思
2014/02/12 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书