对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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
js类中的公有变量和私有变量
Jul 24 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
JavaScript经典案例之简易计算器
Aug 24 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
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
基于jquery循环map功能的代码
2011/02/26 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
Promise扫盲贴
2019/06/24 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python 元组和列表的区别
2020/12/30 Python
利用python进行文件操作
2020/12/04 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
写给保洁员表扬信
2014/01/08 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL