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. JS冒泡排序(div)

    更生动的排序动画. 通过改变div的高度来实现排序,通过闭包来实现for循环的睡眠时间. <!doctype html> <html lang="en"> ...

  2. [转]svn 回退/更新/取消至某个版本命令详解

    1. 取消Add/Delete 取消文件 svn revert 文件名 取消目录 svn revert --depth=infinity 目录名 2. 回退版本 方法1: 用svn merge 1) ...

  3. 【BZOJ3943】[Usaco2015 Feb]SuperBull 最小生成树

    [BZOJ3943][Usaco2015 Feb]SuperBull Description Bessie and her friends are playing hoofball in the an ...

  4. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  5. BestCoder Round 70

    惨败,不能再嘲笑别人了,否则自己也会像别人那样倒霉 HDU 5615:http://acm.hdu.edu.cn/showproblem.php?pid=5615 求ax^2+bx+c能否拆成(px+ ...

  6. 深入理解JavaScript中 fn() 和 return fn() 的区别

    在js中,经常会遇到在函数里调用其它函数的情况,这时候会有 fn() 这种调用方式,还有一种是 return fn() 这种调用方式,一些初学者经常会一脸萌逼地被这两种方式给绕晕了.这里用一个优雅的面 ...

  7. Linux OpenVPN 服务端吊销(revoke)客户端证书

    (转自:https://www.xiaohui.com/dev/server/20070904-revoke-openvpn-client.htm) OpenVPN 服务器与 VPN 客户端之间的身份 ...

  8. 基于webdriver的jmeter性能测试-通过jmeter实现jar录制脚本的性能测试

    续接--基于webdriver的jmeter性能测试-Eclipse+Selenium+JUnit生成jar包 在进行测试前先将用于支持selenium录制脚本运行所需的类包jar文件放到jmeter ...

  9. Javascript 小技能

     /* @@截取字符串长度,汉字算2个字符 @@return [string]+'...' */ var subString = function(str, len) {     var newLen ...

  10. XPath注入跟SQL注入差不多,只不过这里的数据库走的xml格式

    SQL注入这块不想细聊了,相信很多朋友都听到耳朵长茧,不外乎是提交含有SQL操作语句的信息给后端,后端如果没有做好过滤就执行该语句,攻击者自然可以随意操纵该站点的数据库. 比如有一个图书馆站点book ...