angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller
当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子:
html:
<outer‐directive>
<inner‐directive></inner‐directive>
</outer‐directive>
这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素.
js:
app.directive('outerDirective',function(){
return {
scope: {},
restrict: 'AE',
controller: function($scope,$compile,$http){
this.addChild = function(nestedDirective){ //this指代controller
console.log('Got the message from nested directive' + nestedDirective.message);
}
}
}
});
app.directive('innerDirective',function(){
return {
scope: {},
restrict: 'AE',
require: '^?outerDirective',
link: function(scope,elem,attrs,ctrl){
//第四个参数是你require的controller实例
scope.message = 'Hi, Parent directive';
ctrl.addChild(scope);
}
};
});
在父元素指令里定义controller方法:
function($scope,$compile,$http){
this.addChild = function(nestedDirective){ //this指代controller
console.log('Got the message from nested directive' + nestedDirective.message);
}
}
controller方法是一个构造函数,可以给它添加对象的方法(什么是对象的方法看这里:mvc-javascript-web-application / 01.MVC和类 / 1.创建类库 / ex1.3(对象的方法).html).
在子元素指令里定义require属性:require: '^?outerDirective',表示向外层寻找outerDirective指令,直到找到为止.注意:向外层寻找,也包括了自己本身,也就是说,自己可以寻找到自己身上的其它指令.
'?'的作用是如果找不到也不会报错.
定义了require属性后,link函数的第四个参数ctrl就是require到的指令的controller方法的实例.所以ctrl就有了addChild方法了.
下面看一个难一点的栗子:
angular学习笔记(三十)-指令(9)-一个简单的指令示例这个栗子是单个子菜单的展开收起,下面使用require和controller,来扩展这个应用,改成多个菜单,要求点击某个菜单的时候展开此菜单,而其余菜单都收起:
如下过程:
html:
<!DOCTYPE html>
<html ng-app="accordionModule">
<head>
<title>20.10 指令-accordion</title>
<meta charset="utf-8">
<link href="../bootstrap.css" rel="stylesheet">
<script src="../angular.min.js"></script>
<script type="text/ng-template" id="vertical.html">
<div class="btn-group-vertical" ng-transclude>
</div>
</script>
<script type="text/ng-template" id="text.html">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" ng-click="toggle()">{{title}}<span class="caret"></span></button>
<ul class="dropdown-menu" ng-show="ifShow" ng-transclude></ul>
</div>
</script>
<script src="script.js"></script>
<style type="text/css">
body{
padding:40px
}
</style>
</head>
<body>
<div ng-controller="accordionCtrl">
<accordion>
<expander ng-repeat="list in lists" my-title="{{list.title}}">
<li ng-repeat="content in list.contents">
<a href="">{{content}}</a>
</li>
</expander>
</accordion>
</div>
</body>
</html>
js:
/*20.10 指令*/
var accordionModule = angular.module('accordionModule',[]);
accordionModule.controller('accordionCtrl',function($scope){
$scope.lists = [
{title:'标题1',contents:['bunny1','cat1','dog1']},
{title:'标题2',contents:['bunny2','cat2','dog2']},
{title:'标题3',contents:['bunny3','cat3','dog3']},
{title:'标题4',contents:['bunny4','cat4','dog4']},
{title:'标题5',contents:['bunny5','cat5','dog5']},
{title:'标题6',contents:['bunny6','cat6','dog6']},
{title:'标题7',contents:['bunny7','cat7','dog7']},
{title:'标题8',contents:['bunny8','cat8','dog8']}
]
});
accordionModule.directive('accordion',function(){
return {
restrict:'EA',
replace:true,
templateUrl:'vertical.html',
transclude:true,
controller:function(){
this.expanders = [];
this.closeAll = function(scope){
angular.forEach(this.expanders,function(expander){
if(scope!=expander)
expander.ifShow = false;
})
};
this.addExpander = function(scope){
this.expanders.push(scope)
}
}
}
});
accordionModule.directive('expander',function(){
return {
restrict:'EA',
replace:true,
templateUrl:'text.html',
transclude:true,
scope:{title:'@myTitle'},
require:'^?accordion',
link:function(scope,ele,attrs,ctrl){
scope.ifShow = false;
ctrl.addExpander(scope);
scope.toggle = function(){
ctrl.closeAll(scope);
scope.ifShow = !scope.ifShow;
}
}
}
});
下面来解释这个应用:
1. accordion指令的controller的实例也就是link函数的第四个参数ctrl
2. 将expander指令进行ng-repeat,渲染出多个子菜单.
3. 由于这些子菜单是互相有关联而非独立存在的,所以将他们放在一个accordion指令中.
4. 绑定数据模型都和单独的expander一样,唯一不同的是:
1) link函数中调用ctrl的addExpander方法,将每个expander的独立scope压入ctrl的expanders数组中.
2) toggle()方法,它调用了accordion指令的controller的实例的方法.收起除了当前点击项以外其余的菜单.
5. 注意ctrl是唯一的ctrl,而不是每次都实例化出一个新的实例.虽然有多个expander,但是它的ctrl指向的是同一个实例,所以expanders数组是唯一的.
6. 这里expanders数组里存放是每个expander的scope,为什么是scope而不是element呢? 因为closeAll方法需要修改指令独立作用域下的ifShow的,所以这里数组里存放scope比较好写.
完整代码: https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.10%20%E6%8C%87%E4%BB%A4.html
https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js
angular学习笔记(三十)-指令(10)-require和controller的更多相关文章
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(1)-概述
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...
- angular学习笔记(三十)-指令(8)-scope
本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...
- angular学习笔记(三十)-指令(7)-compile和link(3)
本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序: 把上一个例子的代码再进行一些修改: 1.将level-two指令改成具有templa ...
- angular学习笔记(三十)-指令(4)-transclude
本篇主要介绍指令的transclude属性: transclude的值有三个: 1.transclude:false(默认值) 不启用transclude功能. 2.transclude:true 启 ...
随机推荐
- 【Dubbo实战】 Dubbo+Zookeeper+Spring整合应用篇-Dubbo基于Zookeeper实现分布式服务（转）
Dubbo与Zookeeper.Spring整合使用 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spri ...
- Ubuntu18.04和OpenWrt 18.06.0 下使用aria2和BaiduExport处理百度盘下载
Ubuntu下没有可用的百度盘客户端, 下载大文件如果通过浏览器就会特别不可靠. 可以使用Chrome插件 BaiduExport 得到下载链接和参数后, 通过aria2进行下载. Aria2安装 直 ...
- [转载]Ubuntu下Git服务器安装与配置
原文地址:Ubuntu下Git服务器安装与配置作者:F民抄 1. 安装 1.1 安装Git-Core: sudo apt-get install git-core 1.2 安装 Gitosis sud ...
- MATLAB 的函数
[需要注意]MATLAB函数不能先定义后调用! 如下为先定义后调用,结果报错: 错误: 文件:justTest2.m 行:88 列:5脚本中的函数定义必须出现在文件的结尾.请将 "mymax ...
- 【DeepLearning】Exercise:Sparse Autoencoder
Exercise:Sparse Autoencoder 习题的链接:Exercise:Sparse Autoencoder 注意点: 1.训练样本像素值需要归一化. 因为输出层的激活函数是logist ...
- Redis学习之路（008）- Redis C语言客户端库hiredis文档翻译
Hiredis是Redis数据库一个轻量的C语言客户端库. 之所以轻量是由于它只是简单的提供了对redis操作语句支持的接口,并没有实现具体的操作语句的功能.但正是由于这种设计使我们只要熟悉了通用的r ...
- 指尖下的js —— 多触式web前端开发之三：处理复杂手势(转)
这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异).这个事件是对touch event的更高层的封装,和touch一样,它同样包括gestu ...
- openstack neutron 深入
一.概述 环境说明:
- 百度OCR识别示例
文章地址:https://www.cnblogs.com/Charltsing/p/OcrAnswerer.html 最新版为v4.1版,开放一定概率的八窗口体验功能,请截图体验(多点几次图片).更新 ...
- 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange
如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...