基于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动态添加元素事件失效问题解决方法
May 23 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
小程序云开发实战小结
Oct 25 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
JS实现扫雷项目总结
May 19 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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通用检测函数集合
2006/11/25 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
基于python 字符编码的理解
2017/09/02 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
父母对孩子说的话
2014/04/12 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
2014年组织部工作总结
2014/11/14 职场文书
团日活动总结格式
2015/05/11 职场文书