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 DOM

link 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间的通信的更多相关文章

  1. c 进程间的通信

    在上篇讲解了如何创建和调用进程 c 进程和系统调用 这篇文章就专门讲讲进程通信的问题 先来看一段下边的代码,这段代码的作用是根据关键字调用一个Python程序来检索RSS源,然后打开那个URL #in ...

  2. Ucos系统任务间的通信详解

    物联网开发中,ucos系统任务间的通信是指,两个任务之间有数据的交互,具体的一起来看看吧. 1)消息邮箱 我们还是提供两个任务Task1和Task2,假设我们还是解决刚刚的问题,Task1进行按键扫描 ...

  3. Fragment间的通信

    在网上看到的一篇文章,总结的很好 为了重用Fragment的UI组件,创建的每个Fragment都应该是自包含的.有它自己的布局和行为的模块化组件.一旦你定义了这些可重用的Fragment,你就可以把 ...

  4. angularJS中directive与directive 之间的通信

    上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...

  5. c# 进程间的通信实现之一简单字符串收发

       使用Windows API实现两个进程间(含窗体)的通信在Windows下的两个进程之间通信通常有多种实现方式,在.NET中,有如命名管道.消息队列.共享内存等实现方式,这篇文章要讲的是使用Wi ...

  6. Android进程间的通信之AIDL

    Android服务被设计用来执行很多操作,比如说,可以执行运行时间长的耗时操作,比较耗时的网络操作,甚至是在一个单独进程中的永不会结束的操作.实现这些操作之一是通过Android接口定义语言(AIDL ...

  7. Android进程间的通信之Messenger

    Android进程间的通信方式可以通过以下两种方式完成: Android接口定义语言(AIDL) 使用Messenger绑定服务 本文我们将学习使用Messenger绑定服务的方式进行进程间的通信. ...

  8. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  9. iOS开发多线程篇—线程间的通信

    iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...

随机推荐

  1. OSG消息机制之事件处理概述

    OSG的消息机制包括好多个头文件预定义及多个类. 首先,消息接收相关的类当属osgGA::GUIEventHandler和osgGA::GUIEventAdapter这两个类了.前者处理OSG程序与用 ...

  2. java-并发-线程

    浏览以下内容前,请点击并阅读 声明 软件的并发是指同时做多件事情,java平台一开始就支持并发编程,java编程语言以及类库含有对并发最基本的支持,从5.0版本开始,java平台开始包含一些高并发的A ...

  3. [资料分享]Java35期基础班和就业班

    直接上链接:https://pan.baidu.com/s/1jI8p2Xw 密码:gr9x

  4. Perforce: 常用功能。

    1. checkout fatherDir下所有一级子目录下名称为text.txt的文件到change list 1234: p4 edit -c 1234 -t text+k "fathe ...

  5. javascript--Math相关

    最值:Math.max(1,2,3,5);//5 Math.min(1,2,3,5);//1 数组最值:var a=[1,2,3,5]; Math.max.apply(null, a);//最大值 M ...

  6. js 判断浏览器和ie版本号 收集

    function testB () { // body... var isOpera = !!window.opera ||!!window.opr|| navigator.userAgent.ind ...

  7. 插头dp

    插头dp 感受: 我觉得重点是理解,算法并不是直接想出怎样由一种方案变成另一种方案.而是方案本来就在那里,我们只是枚举状态统计了答案. 看看cdq的讲义什么的,一开始可能觉得状态很多,但其实灰常简单 ...

  8. ejoy2d源码阅读笔记1

    一直想学lua,学它如何与C结合来作逻辑,所以找了云风的一份代码来研究.这份代码是个框架库,叫ejoy2d,据云风的博客说,他们最新的手机游戏用的就是这套框架,所以实用性应该很强,虽然我不是学游戏的, ...

  9. springmvc上传文件,抄别人的

    SpringMVC中的文件上传 分类: SpringMVC 2012-05-17 12:55 26426人阅读 评论(13) 收藏 举报 stringuserinputclassencoding 这是 ...

  10. 日常关键字:定时关机、该任务映像已损坏或已篡改.(0x80041321)、ChaZD生词同步扇贝

    我在床上用chinanet网络慢得简直令人发指,12B/S.是的你没有看错,这是我最常看到的网速.但是我最近发现电脑联网开出一个WiFi,在床上用手机上网时,网速会一点提升,可达到1KB/S(⊙﹏⊙) ...