基于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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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使用GD2绘制几何图形示例
2017/02/15 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
FCK调用方法..
2006/12/21 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python定义类self用法实例解析
2020/01/22 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
春风行动实施方案
2014/03/28 职场文书
校庆筹备方案
2014/03/30 职场文书
土地转让协议书
2014/04/15 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
公司与个人合作协议书
2016/03/19 职场文书
请假条应该怎么写?
2019/06/24 职场文书
导游词之桂林
2019/08/20 职场文书