基于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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
KnockoutJs快速入门教程
May 16 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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中使用匿名函数操作数据库的例子
2014/11/17 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
详解小程序缓存插件(mrc)
2018/08/17 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
详解Python中最难理解的点-装饰器
2017/04/03 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python中return不返回值的问题解析
2020/07/22 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
保护野生动物倡议书
2014/05/16 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2015年母亲节寄语
2015/03/23 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
军训通讯稿范文
2015/07/18 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript