Directive间的通信
源自大漠的《AngularJS》5个实例详解Directive（指令）机制
这个例子主要的难点在于如何在子Expander里面访问外层Accordion的scope中的数据
注释解读一下
JS代码：
var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
return {
restrict : 'EA',
replace : true,
//这里没有定义scope，将使用元素上的scope，就是下面ng-controller指定的SomeController的scope
transclude : true,
template : '<div ng-transclude></div>',
controller : function() {
var expanders = [];
this.gotOpened = function(selectedExpander) {
angular.forEach(expanders, function(expander) {
if (selectedExpander != expander) {
expander.showMe = false;
}
});
}
this.addExpander = function(expander) {
expanders.push(expander);
}
}
}
});
expModule.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
require : '^?accordion', //依赖
scope : {
title : '=expanderTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs, accordionController) {
//注意link的第四个参数
scope.showMe = false;
accordionController.addExpander(scope);//调用外层指令的方法
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
accordionController.gotOpened(scope);//调用外层指令的方法
}
}
}
});
expModule.controller("SomeController",function($scope) {
$scope.expanders = [{
title : 'Click me to expand',
text : 'Hi there folks, I am the content that was hidden but is now shown.'
}, {
title : 'Click this',
text : 'I am even better text than you have seen previously'
}, {
title : 'Test',
text : 'test'
}];
});
HTML代码：
<html ng-app="expanderModule">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../angular-1.0.3/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="Accordion.css"/>
</head>
<body ng-controller='SomeController' >
<accordion>
<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
{{expander.text}}
</expander>
</accordion>
</body>
<script src="Accordion.js"></script>
</html>
CSS代码：
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
运行效果：
require option
看看官网的原文怎么说
The myPane directive has a require option with value ^^myTabs. When a directive uses this option, $compile will throw an error unless the specified controller is found.
.The ^^ prefix means that this directive searches for the controller on its parents.
.The ^ prefix would make the directive look for the controller on its own element or its parents;
.without any prefix, the directive would look on its own element only.
.The ? prefix, if not found then pass null to the link as the fourth parameter
link函数的参数
Creating a Directive that Manipulates the DOMlink takes a function with the following signature, function link(scope, element, attrs, controller, transcludeFn) { ... }, where:
. scope is an Angular scope object.
. element is the jqLite-wrapped element that this directive matches.
. attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
. controller is the directive's required controller instance(s) or its own controller (if any). The exact value depends on the directive's require property.
. transcludeFn is a transclude linking function pre-bound to the correct transclusion scope.
Directive间的通信的更多相关文章
-
c 进程间的通信
在上篇讲解了如何创建和调用进程 c 进程和系统调用 这篇文章就专门讲讲进程通信的问题 先来看一段下边的代码,这段代码的作用是根据关键字调用一个Python程序来检索RSS源,然后打开那个URL #in ...
-
Ucos系统任务间的通信详解
物联网开发中,ucos系统任务间的通信是指,两个任务之间有数据的交互,具体的一起来看看吧. 1)消息邮箱 我们还是提供两个任务Task1和Task2,假设我们还是解决刚刚的问题,Task1进行按键扫描 ...
-
Fragment间的通信
在网上看到的一篇文章,总结的很好 为了重用Fragment的UI组件,创建的每个Fragment都应该是自包含的.有它自己的布局和行为的模块化组件.一旦你定义了这些可重用的Fragment,你就可以把 ...
-
angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
-
c# 进程间的通信实现之一简单字符串收发
使用Windows API实现两个进程间(含窗体)的通信在Windows下的两个进程之间通信通常有多种实现方式,在.NET中,有如命名管道.消息队列.共享内存等实现方式,这篇文章要讲的是使用Wi ...
-
Android进程间的通信之AIDL
Android服务被设计用来执行很多操作,比如说,可以执行运行时间长的耗时操作,比较耗时的网络操作,甚至是在一个单独进程中的永不会结束的操作.实现这些操作之一是通过Android接口定义语言(AIDL ...
-
Android进程间的通信之Messenger
Android进程间的通信方式可以通过以下两种方式完成: Android接口定义语言(AIDL) 使用Messenger绑定服务 本文我们将学习使用Messenger绑定服务的方式进行进程间的通信. ...
-
第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
-
iOS开发多线程篇—线程间的通信
iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...
随机推荐
-
备忘-Android ViewPager 子页监听事件
@Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(mListViews ...
-
《精通C#》第十六章-动态类型和动态语言运行时-第一节至第四节
在.Net4.0中引入了一个关键字dynamic,这是一个动态类型关键字.Net中还有一个关键字是var,这是一个隐式类型,可以定义本地变量,此时var所代表的实际的数据类型有编译器在初次分配时决定, ...
-
[deviceone开发]-do_FrameAnimtionView的简单动画示例
一.简介 do_FrameAnimtionView组件是用加载GIF动态图片和加载一系列图片形成动画效果的展示组件,这个示例直观的展示组件基本的使用方式.适合初学者. 二.效果图 三.相关下载 htt ...
-
SLC、eSLC、MLC、eMLC的区别
SLC.eSLC.MLC.eMLC的区别 作为SSD主要元件的NAND闪存,我们经常见到的有SLC和MLC两种,甚至还细分出eSLC和eMLC等等,现在我们谈一下他们之间的区别. SLC全 ...
-
高榕资本宾悦：未使用的企业家Testin云测试服务类故障
高榕资本岳斌:创业者未使用Testin云測试服务属不合格 2014/10/09 · Testin · 开发人员訪谈 Testin云測与工信部等联合承办的ICT中国.2014高层论坛之移动开发人员分论坛 ...
-
css基础学习---简单理解
1:在css中定义图片相对路径 #primary-nav { //相对路径 background: url(../images/alert-overlay.png) repeat-x; height: ...
-
ASP.NET MVC 常用扩展点：过滤器、模型绑定等
一.过滤器(Filter) ASP.NET MVC中的每一个请求,都会分配给对应Controller(以下简称“控制器”)下的特定Action(以下简称“方法”)处理,正常情况下直接在方法里写代码就可 ...
-
JavaScript ,Python,java,Go系列算法之选择排序
常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等. 用一张图概括: 选择排序 选择排序是一种简单直观的排序算法,无论什么数据进去都是O(n2) ...
-
luogu P3373 【模板】线段树 2
题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含三个整数N.M.P,分别 ...
-
maven 创建war类型项目
1. 创建maven project时选择packaging为war 2. 在webapp文件夹下新建META-INF和WEB-INF/web.xml 3. 在pom.xml中添加web项目需要的ja ...