angularJS中的父子作用域和兄弟作用域，以及父子，兄弟controller通信机制

最新推荐文章于 2021-11-05 23:45:40 发布
最新推荐文章于 2021-11-05 23:45:40 发布
阅读量8.4k 收藏 6
点赞数 1
分类专栏： angularJs ionic Hybrid App开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sourcecode_poet/article/details/53509834
版权

angularJS中非常重要的概念之一就是作用域，不同的作用域之间是相互隔离的，通过常规手段是无法互相访问变量及方法的
本次我们着重讲一下父子作用域和兄弟作用域

1.父子作用域

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl"></div>
</div>

当我们的controller层级关系是这种时，ChildCtrl就是子controller,ParentCtrl就是父controller，他们之间的作用域关系就是父子作用域

app.controller("Pa
最低0.47元/天 解锁文章
Coder.SirLoin
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对angularJs中controller控制器scope父子集作用域的实例讲解
12-29
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
AngularJS 作用域Scope的继承
zx007fack的专栏
06-07 4255
转载自：http://www.angularjs.cn/A09C 以下方式会创建新的子作用域，并且进行原型继承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true创建directive。以下方式会创建新的独立作用域，不会进行原型继承：用scope: { ...
angularJs自定义指令父子指令通信
martsforever的博客
12-29 4937
老规矩，先上效果图：首先说一下本文的重点：1、父指令如何调用子指令中的方法；2、子指令如何调用父指令中的方法；（都不是通过广播的方式）如果有同学还不知道父指令如何通过=@&给子指令传递参数，或者一些其他自定义指令的属性（scope、complie、link……）的话，请查阅官网文档发或者其他文档博客。前言： 在自学了一段时间VUE之后，被VUE简洁的代码以及强大的解耦能力深深折服，所有的界面元素都
Angular父组件与子组件交互/组件间交互/组件间数据和事件交互示例
^_^ 努力生活
11-05 2524
文章目录一、数据通信1.父组件向子组件传递a.通过输入型属性绑定把数据从父组件传到子组件b.通过 setter 截听输入属性值的变化 一、数据通信 1.父组件向子组件传递 a.通过输入型属性绑定把数据从父组件传到子组件 在子组件中定义变量： @Input() childVariable = ""; 在子组件模板中输出该变量： <p>{{childVariable}}</p> 在父组件中定义变量： parentVariable = "" 在父组件模板中输入该变量值： <
angular中的$scope类
H5BOYs的博客
10-19 3397
一，$scope的作用； 1，用来完成在view和controller之间的数据传递，$scope是实现angular中MVVM双向数据同步的关键； 2，所有页面上的属性和方法都放在$scope上进行声明； 3，$scope上面的属性和方法，angular会给该属性或方法添加一个监视器，在当前控制器中创建一个$watchList[ ]; wacth对象会对当前的数据中的变量旧值和新值进行比
详解AngularJS中的作用域
12-10
总的来说，AngularJS中的作用域是数据绑定的核心机制，它使得模型数据能够在控制器和视图之间自由流动，并且支持父子作用域之间的继承关系。理解作用域的工作原理对于开发复杂的AngularJS应用程序至关重要。
学习Angular中作用域需要注意的坑
09-01
- 避免在多个作用域中直接共享基本类型，尽量使用引用类型，尤其是当涉及到父子作用域间的共享数据时。 - 使用`$rootScope`谨慎，因为它是最顶级的作用域，全局共享可能导致难以预料的问题。 - 理解并合理利用`$...
AngularJS Controller作用域.docx
01-11
本文将深入探讨AngularJS Controller的作用域，以及它如何与视图（View）和数据模型（Model）相互作用。 首先，$scope是AngularJS中的一个关键对象，它充当了视图和数据模型之间的桥梁。在AngularJS应用中，每个...
angular中实现控制器之间传递参数的方式
08-30
在AngularJS中，控制器之间的参数传递是常见的需求，特别是在构建复杂的应用时。本文将详细介绍两种在Angular中实现控制器之间传递参数的方法。 1. **通过$rootScope传参** AngularJS的作用域采用原型链机制，...
Spring和SpringMVC父子容器关系
11-23
当Spring遇到这个注解时，它会在当前作用域（即子容器）中寻找匹配的bean，如果没有找到，则会向上搜索父容器。这意味着，我们可以方便地在SpringMVC的Controller中注入服务层的bean，无需关心它们是在哪个容器中...
angularjs学习笔记之完整的项目结构
11-24
4. **继承特性**：AngularJS中的作用域是父子关系，子$scope可以继承父$scope的属性和方法，形成了一个作用域链，使得数据可以沿着链传递。 5. **根作用域**：每个AngularJS应用有一个根作用域`$rootScope`，它存在...
最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt
09-02
├最新AngularJS开发宝典—第051讲 controller控制器scope父子集作用域实例讲解一 .mp4 ├最新AngularJS开发宝典—第052讲 controller控制器scope父子集作用域实例讲解二.mp4 ├最新AngularJS开发宝典—第053讲 指令...
AngularJs实现聊天列表实时刷新功能
12-02
昨天在做app的聊天列表时，遇到了一个问题，消息监听器监听到了一个新的消息，但是如果这时已经处于消息列表的页面那么消息列表并不会及时...scope 的 broadcast 和 on 是用于作用域有交集(父子关系)controller间事件
angular中子控制器向父控制器传值的实例
10-17
在AngularJS框架中，通信...总的来说，AngularJS中的子控制器向父控制器传递值是一种常见的应用场景，它依赖于Angular的事件绑定和方法绑定特性。通过理解这些核心概念，开发者可以更好地构建复杂且可扩展的应用程序。
[AngularJS面面观] 8. scope继承 - 属性覆盖，隔离scope以及指定scope的parent
不忘初心，好好沉淀
07-03 8178
上一节中我们探讨了遍历scope树形继承结构的过程。本节继续讨论一下在继承结构下产生的属性覆盖问题，以及scope的一些特殊情况：隔离scope以及为scope显式指定其父亲scope。 ##属性覆盖(Attribute Shadowing) 属性覆盖这个问题或许会对Angular新手造成一定的困扰，尽管从本质上而言，它的成因还是基于JavaScript中原型继承这一概念。 那么让我们看看属性覆盖到
AngularJS从子控制器访问父作用域
asdfgh0077的博客
06-01 429
I've set up my controllers using data-ng-controller="xyzController as vm" 我使用data-ng-controller="xy
AngularJS内幕详解之 Scope
weixin_33725272的博客
06-08 202
2019独角兽企业重金招聘Python工程师标准>>> ...
AngularJS开发学习笔记:父子作用域之间的通信—$on、 $emit、$broadcast的介绍
JustWantToFly的博客
11-02 327
angularJs中的作用域（$scope）结构和DOM结构非常相似，也是一个层次分明的树状结构。它有一个根作用域$rootscope（对应angular应用或ng-app），其他作用域是嵌套在根作用域下面的。 angularJs的$scope之间都遵循js中对象原型继承方式，当子作用域中没有该对象时，默认向上级作用域（父作用域）寻找，直到找到或者到达$rootscope为止，当子作用域有该...
父子组件中的样式作用域
最新发布
05-22
在 Vue.js 中，父组件和子组件的样式是有作用域的。这是通过给组件的根元素自动添加一个唯一的 ID 来实现的。这个 ID 是通过 Vue.js 内部的编译器生成的，而不是手动定义的。 这种机制可以防止父组件的样式污染到子组件中，同时也可以防止子组件的样式影响到父组件。如果您想要在子组件中使用父组件的样式，您可以使用 `::v-deep` 或 `/deep/` 伪类选择器来覆盖样式的作用域。 例如，如果您想要在子组件中使用父组件的样式，您可以这样写： ```css <style scoped> /* 父组件中的样式 */ .parent-class { color: red; } </style> <template> <div class="parent-class"> <child-component></child-component> </div> </template> ``` ```css /* 子组件中的样式 */ /* 使用 ::v-deep 或 /deep/ 伪类选择器来覆盖样式的作用域 */ ::v-deep .parent-class { color: blue; } ``` 这样，子组件中的样式就可以覆盖父组件中的样式了。不过，需要注意的是，`::v-deep` 在 Vue.js 3.0 版本中已经被废弃了，推荐使用 `>>>` 或 `/deep/` 伪类选择器来代替。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值