AngularJs开发——指令与控制器间的通信
(原文:http://www.html5jscss.com/controller-between-directive.html)
指令与控制器之间通信,跟控制器间的通信、指令间通信也类似,也是下几种方法:
- 通过指令自身参数
- 基于event传播的方式
- service的方式
通过指令自身参数来共享对象、共享方法
首先我们必须得清楚,每一个 $scope 都是scope的一个事例,而通过绑定将数据绑定在 $scope 就能实现双向绑定。scope的层次结构跟controller相关,继承关系跟又遵循了原型继承的规则,而子controller所初始化的scope是创建一个新的变量,而不是去修改父controller中的值。所以就不难使用为什么不使用基本类型变量而是使用引用类型变量去实现控制器间的通信。
指令中怎么创建 scope:
- scope默认值是false,表示scope跟父controller的scope相同
- scope:true,表示创建一个继承自父scope的新scope,这样就可以让同一个父控制下的指令都可以使用这个scope进行通信。
- 创建完全独立的属于指令自己的scope,这样可以防止读取和修改父级scope的数据。
创建完全独立的scope的API:
- =:提供一个与父scope的双向绑定的属性。
- &:能够在指令内访问定义在父scope注册的函数。
- @:提供一个 父scope-》子指令的单向绑定的属性。
双向数据绑定DEMO(http://jsbin.com/xodebe/2/edit?html,js,output)。
通过服务
通过 services 实现控制器与指令双向通信,也比较简单,DEMO(http://jsbin.com/zaloj/5/edit?html,js,output)
基于event传播的方式
使用基于event来让控制器跟指令通信,指令中的 scope 就不能设置为独立的了,所以编写指令最好不要使用此方法。
DEMO(http://jsbin.com/makoxo/6/edit?html,js,output)
其实跟控制器通信中基于event传播原理是一样,只是把controller中的代码写在了diresctive中的controller中而已。
通过三种方法比较:个人比较推荐方法一中的创建独立scope。因为这样既不会污染其他scope,也能够一眼就能看出来该指令需要从外部scope得到方法或者属性。对于方法二个人觉得用在初始化还是挺不错的。对于方法三则不很不推荐。
AngularJs开发——指令与控制器间的通信的更多相关文章
- AngularJs开发——控制器间的通信
AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...
- iOS开发多线程篇—线程间的通信
iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- iOS开发多线程篇—线程间的通信(转)
这里转载 给自己一个备份 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转 ...
- angular开发控制器之间的通信
一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...
- iOS开发多线程篇 04 —线程间的通信
iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...
- angular 控件间的通信
先引入 设置meta元素 http://blog.sina.com.cn/s/blog_51048da70101cgea.html //设置 虚拟窗口的大小等于设备的大小 <meta name= ...
- AngularJS开发之_指令
指令是什么? 指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. 1.指令的匹配模式 index ...
- Android UI开发第二十六篇——Fragment间的通信
为了重用Fragment的UI组件,创建的每个Fragment都应该是自包含的.有它自己的布局和行为的模块化组件.一旦你定义了这些可重用的Fragment,你就可以把它们跟一个Activity关联,并 ...
随机推荐
- Linux CentOS7.0 (04)systemctl vs chkconfig、service
CentOS 7.0中已经没有service命令,而是启用了systemctl服务器命令 systemctl 是系统服务管理器命令,它实际上将 service 和 chkconfig 这两个命令组合到 ...
- Excel 日期截取(函数)
需求:时间段截取,去掉年月日,保留时分. 实现函数: =TEXT(A2,"HH:MM")&"-"&TEXT(B2,"HH:MM& ...
- JAVAFX-5 开发应用
fx 属性与布局 属性与布局是一个具备gui开发能力的开发者,快速进入开发必备的知识储备,下面简单说一说常用的属性,与布局 颜色 颜色 在 javafx.scene.paint.Color 类中提供了 ...
- 浅谈 DML、DDL、DCL的区别
一.DML DML(data manipulation language)数据操纵语言: 就是我们最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些 ...
- python基础——类名称空间与对象(实例)名称空间
python基础--类名称空间与对象(实例)名称空间 1 类名称空间 创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类的良好总属性:数据属性和函数属性 其中类 ...
- spark2.1:读取hive中存储的多元组(string,double)失败
这两天和同事一起在想着如何把一个表的记录减少,表记录包含了:objectid(主小区信息),gridid(归属栅格),height(高度),rsrp(主小区rsrp),n_objectid(邻区),n ...
- redis从入门到
下载 首先我们要到GitHub(https://github.com/MicrosoftArchive/redis/releases)上下载Source code (tar.gz) 上传到Linux上 ...
- MongoDB 更新文档
MongoDB 使用 update() 和 save() 方法来更新集合中的文档.接下来让我们详细来看下两个函数的应用及其区别. update() 方法 update() 方法用于更新已存在的文档.语 ...
- vue.js初识(一)
一 什么是vue? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不 ...
- 【Android学习笔记】布局的简单介绍
我在学习Android开发的时候是基于实战项目的,基础理论知识以前也是零散的看过一些,个人还是觉得边做项目边学要快些.现在做的这个项目iOS端是我做的,这样逻辑什么的都很熟悉,于我而言换个平台也只是换 ...