<!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 学习笔记——自定义指令之间的交互的更多相关文章

  1. Angular学习笔记之组件之间的交互

    1.@Input:可设置属性 当它通过属性绑定的形式被绑定时,值会“流入”这个属性. 在子组件中使用,例如:@Input()name:string 父组件定义宾亮,并在父组件的模板中绑定,例如: 子组 ...

  2. Angular 学习笔记——自定义指令

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  3. Angular 学习笔记——自定义标签

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  4. Angular 学习笔记——标签指令

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  5. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  6. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  7. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  8. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  9. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

随机推荐

  1. git的回退和撤销操作

    回退是git的使用中很常用的一个操作,如果清楚各个回退命令的作用,不仅大大加快代码回退的效率,还能避免代码回退造成的事故 1.git reset --hard [commit] 清空暂存和未暂存的更改 ...

  2. js判断变量类型,类型转换,

    1.typeof 操作符 主要检测基础数据类型 var a="zhangqian"; var b=true; ; var d; var e=null; var f=new Obje ...

  3. 配置sanmba

    samba是Linux系统上的一种文件共享协议,可以实现Windows系统访问Linux系统上的共享资源,现在介绍一下如何在Ubuntu 14.04上安装和配置samba 工具/原料   Ubuntu ...

  4. python自动化测试windows gui

    http://sourceforge.net/projects/pywinauto/files/pywinauto/ http://www.microsoft.com/en-us/download/c ...

  5. Altium 原理图出现元件 “Extra Pin…in Normal of part ”警告

    原理是因为元器件库中的元器件的所有模式MODE不能和pcb中的引进匹配造成的,那什么又是MODE呢, 看下买的图便很清楚了, MODE可以理解为不同的视图模式吧. 然后赶紧打开原理图库中的有问题的元器 ...

  6. UVA 10746 Crime Wave - The Sequel

    最小费用最大流 源点->警察->bank->汇点 剩下的模板就可以 #include <map> #include <set> #include <li ...

  7. linux内核分析之进程地址空间【转】

    转自:http://blog.csdn.net/bullbat/article/details/7106094 版权声明:本文为博主原创文章,未经博主允许不得转载. 本文主要介绍linux内核中进程地 ...

  8. Nginx整合PHP原理

    安装Nginx        在网上,看到不少人装Nginx 时非常麻烦,配置时用了一大堆选项,请问你们真实现那么多功能么?害的我越看越郁闷.此次安装Nginx如果是按着上面笔者的步骤一步步走下来,安 ...

  9. log4j配置文件动态指定日志文件名称

    我们在项目当中经常会使用log4j进行日志记录,偶尔会遇到一些要求,比如日志文件名称按照启动参数动态配置,而不去修改log4j.xml,比较简单的一种做法是,通过设置系统属性的方式实现,代码: if( ...

  10. 【ACM】不要62 （数位DP）

    题目:http://acm.acmcoder.com/showproblem.php?pid=2089 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新 ...