对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 相关文章推荐
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JavaScript类的写法
Sep 17 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 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经典的给图片加水印程序
2006/12/06 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php7性能提升的原因详解
2019/10/13 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python操作SQLite简明教程
2014/07/10 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Django的models模型的具体使用
2019/07/15 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
小学教研工作制度
2014/01/15 职场文书
财产保全担保书范文
2014/04/01 职场文书
保护环境的标语
2014/06/09 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书