Angular 学习笔记——自定义指令之间的交互
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script src="angular.min.js"></script>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.directive('hi',function(){
return {
restrict:'AE',
replace:'true',
transclude:'true',
template:'<div><h1 ng-transclude></h1></div>'
}
}); m1.directive('hello',function (){
return{
restrict:'AE',
template:'<span>title</span>'
}
})
</script>
</head>
<body>
<hi>
<hello></hello>
</hi>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px red solid; display:none;}
#div1 input.active , #div2 input.active{ background:red;}
</style>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.directive('hello',function(){
return {
restrict : 'E',
replace : true,
transclude : true,
controller : function($scope){
//$scope.name = 'miaov';
this.name = 'miaov';
this.show = function(){};
},
template : '<div>hello angular<h1 ng-transclude></h1></div>'
};
});
m1.directive('hi',function(){
return {
restrict : 'E',
replace : true,
require : '?^hello',
template : '<span>hi angular</span>',
link : function(scope,element,attr,reController){
console.log( reController );
}
};
}); m1.controller('Aaa',['$scope',function($scope){ }]); </script>
</head> <body ng-controller="Aaa">
<hello>
<hi></hi>
</hello>
</body>
</html>
Angular 学习笔记——自定义指令之间的交互的更多相关文章
- Angular学习笔记之组件之间的交互
1.@Input:可设置属性 当它通过属性绑定的形式被绑定时,值会“流入”这个属性. 在子组件中使用,例如:@Input()name:string 父组件定义宾亮,并在父组件的模板中绑定,例如: 子组 ...
- Angular 学习笔记——自定义指令
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- Angular 学习笔记——自定义标签
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- Angular 学习笔记——标签指令
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- 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属性,那 ...
随机推荐
- 阿里云服务器ubuntu安装java运行环境
服务器 阿里云服务器ubuntu安装java运行环境 转:http://www.codingyun.com/article/45.html 今天来给大家介绍一下在阿里云ubuntu服务器下安装java ...
- oracle 的数组（转）
declare type t_indexby is table of number index by binary_integer; type t_nested is table of number; ...
- [poj_3469]多核CPU
Sample Input 3 1 1 10 2 10 10 3 2 3 1000 Sample Output 13 最小割,把模块看做点,建源点s和汇点t,以下(a,b,c)表示从a向b连一条容量为c ...
- CyanogenMod编译
1. 介绍 本文介绍了i9100手机CyanogenMod 13系统的编译方法 2. 系统要求 笔者使用的环境为CentOS-7-x86_64, 用来为i9100编译CM 13,之所以选择最新版的CM ...
- 兼容ie7到ie11,edge,chrome,firefox的ajax发送接收post数据代码
/* * 生成XMLHttpRequest */ function getxhr() { //获取ajax对象 var xhr = null; try { xhr = new XDomainReque ...
- 5.DataFrame(基本概念)
- PHP防止表单重复提交的解决方法
PHP+SESSION防止表单重复提交 index.php 当前表单页面is_submit设为0 SESSION_START(); $_SESSION['is_submit'] = 0; <fo ...
- win2008通过计划任务定时执行bat文件
前段时间在Windows Server 2008安装了一套基于MySQL数据库的软件,处于数据安全的考虑,希望每天能够自动进行数据库备份.我在别人脚本的基础上自己写了一个数据库备份的bat脚本,双击该 ...
- (4)C#工具箱-菜单和工具栏
1.ContextMenuStrip(右键菜单栏) 把contextMenuStrip控件拖到窗体上,会在窗体下面显示,点击控件在最上行显示菜单栏,可以任意设置.(运行以后不会在界面上显示,它需要预控 ...
- Python爬取中国天气网
Python爬取中国天气网 基于requests库制作的爬虫. 使用方法:打开终端输入 “python3 weather.py 北京(或你所在的城市)" 程序正常运行需要在同文件夹下加入一个 ...