AngularJs 学习笔记(1)–controller 通信

用angularJs一个月了,始终想写点类似于学习笔记的东西。酝酿了一个星期,就从今天开始吧。刚开始写有些东西可能是修改的别人的东西,希望多写几次后可以贴上自己的东西。
今天就从controller的通信机制写起。
每一个controller都有自己的作用域,即scope。scope就是指向应用模型的对象,是表达式的执行环境(scope is an object that refers to the application model. It is an execution context for expressions. )。父controller与子controller之间,以及兄弟controller之间的数据引用关系是怎样的呢?我们通过下面的例程来看一下:
index.html:

app.js:

运行结果如图:

由此我们可以看出,父controller的作用范围可以深入到子contrller里面去,而字controller的作用范围是不包括父controller的。那么父contrller的作用范围可以渗透到几层子孙controller呢?我们可以继续测试,答案是父controller的作用与可以向子孙controller渗透。
那么兄弟controller之间,子controller怎么向父controller通信呢?我们会很快想到javascript的异步回调响应式通信—事件机制(或消息机制)。对,这就是angularjs解决controller之间通信的机制,所推荐的唯一方式,简而言之这就是angular way。
Angularjs为在scope中为我们提供了冒泡和隧道机制,$broadcast会把事件广播给所有子controller,而$emit则会将事件冒泡传递给父controller,$on则是angularjs的事件注册函数,有了这一些我们就能很快的以angularjs的方式去解决angularjs controller之间的通信,看下面的例程:
index.html

app.js:

这里childCtr1的name改变会以冒泡传递给父controller,而父controller会对事件包装在广播给所有子controller,而childCtr2则注册了change事件,并改变自己。注意父controller在广播时候一定要改变事件name。

参考文章:
1.angular官方文档 http://docs.angularjs.org/guide/scope
2.破狼博客 http://www.cnblogs.com/whitewolf/archive/2013/04/16/3024843.html

AngularJs 学习笔记(1)–controller 通信》上有2条评论

  1. 张迪

    这篇文章写得很好,内容丰富了很多。
    不过看得出来文章参考了破狼的博客。对于参考的内容,必须在文章最后注明来源。这是做技术做学问的的方式。

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注