对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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
深入理解angularjs过滤器
May 25 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
javascript数组去重方法分析
Dec 15 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 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在文件指定行中写入代码的方法
2012/05/23 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
javascript的BOM
2016/05/03 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
一些常用的Python爬虫技巧汇总
2016/09/28 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python实现textrank关键词提取
2018/06/22 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
python2 对excel表格操作完整示例
2020/02/23 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
《小小竹排画中游》教学反思
2014/02/26 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
python代码实现扫码关注公众号登录的实战
2021/11/01 Python