对angularJs中controller控制器scope父子集作用域的实例讲解


Posted in Javascript onOctober 08, 2018

1.ctrl1是父级控制器,ctrl2和ctrl3都是ctrl1的子级控制器,

2.父级ctrl1中name值的改变会影响ctrl2和ctrl3中name值的改变,

3.但是ctrl2有自己的name输入传的值,不会影响ctrl1和ctrl3,这就是继承隔离,

4.ctrl3无name赋值就继承父级ctrl1中的name的值。

一、继承隔离的情况

<div ng-app="module">
 <div ng-controller="ctrl1">
  {{name}}<input type="text" ng-model="name">
  <div ng-controller="ctrl2">
   {{name}}<input type="text" ng-model="name">
  </div>
  <div ng-controller="ctrl3">
   {{name}}
  </div>
 </div>
</div>
<script>

 var m = angular.module('module', []);
 m.controller('ctrl1', ['$scope', function ($scope) {
  $scope.name = '泠泠在路上'
 }]);
 m.controller('ctrl2', ['$scope', function ($scope) {

 }]);
 m.controller('ctrl3', ['$scope', function ($scope) {

 }]);

</script>

运行结果:

对angularJs中controller控制器scope父子集作用域的实例讲解

二、继承但不隔离

在ctrl2中改变name的值,既影响自己的值,也影响父级的值。

代码:

<div ng-app="module">
 <div ng-controller="ctrl1">
  {{data.name}}<input type="text" ng-model="data.name">
  <div ng-controller="ctrl2">
   {{data.name}}<input type="text" ng-model="data.name">
  </div>
  <div ng-controller="ctrl3">
   {{data.name}}
  </div>
 </div>
</div>
<script>

 var m = angular.module('module', []);
 m.controller('ctrl1', ['$scope', function ($scope) {
 /* 定义对象*/
  $scope.data={name:'泠泠在路上'}
 }]);
 m.controller('ctrl2', ['$scope', function ($scope) {

 }]);
 m.controller('ctrl3', ['$scope', function ($scope) {

 }]);

</script>

运行结果:

对angularJs中controller控制器scope父子集作用域的实例讲解

以上这篇对angularJs中controller控制器scope父子集作用域的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 #Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 #Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 #Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
angularJs select绑定的model取不到值的解决方法
Oct 08 #Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 #Javascript
微信小程序wx:for循环的实例详解
Oct 07 #Javascript
You might like
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python比较2个时间大小的实现方法
2018/04/10 Python
python re模块的高级用法详解
2018/06/06 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python爬虫实现获取下一页代码
2020/03/13 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python文件路径操作方法总结
2020/12/21 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
学生自我鉴定
2013/12/18 职场文书
上班早退检讨书
2014/01/09 职场文书
2014全国两会心得体会
2014/03/17 职场文书
购房协议书
2014/04/11 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
投标承诺函范文
2015/01/21 职场文书