基于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 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
JS函数式编程实现XDM一
Jun 16 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/07/01 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JSONP基础知识详解
2017/03/19 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
Python中暂存上传图片的方法
2015/02/18 Python
python多进程共享变量
2016/04/06 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
举例讲解Python常用模块
2019/03/08 Python
详解Python self 参数
2019/08/30 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
函授自我鉴定范文
2014/02/06 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
自信主题班会
2015/08/14 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL