<!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. [ CodeVS冲杯之路 ] P1169

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1169/ 感觉这题目好恐怖,莫名其妙乱码一堆就AC了…… 它看上去是两个子问题,实际上可以看成从起点找两条不相交的路径使 ...

  2. Vim文字编辑

    首先说明发现的vim编辑器的一个特点:vim编辑只有按[ENTER]键或命令模式下[o]才会换行,否则虽然在vim编辑器里显示的内容换行了,但事实上没有换行.如果你发现自己测试的效果和下面描述的不符, ...

  3. tomcat 异常：Caused by: org.apache.catalina.LifecycleException: The connector cannot start since the specified port value of [-1] is invalid

    启动tomcat时出现异常: org.apache.catalina.LifecycleException: Failed to start component [Connector[AJP/1.3- ...

  4. 错误整理：容器启动报错com.sun.faces.config.WebConfiguration cannot be cast to com.sun.faces.config....

    错误集锦: 今天用Jboss部署一个web项目的时候报了个奇怪的错误(用Tomcat部署运行良好),错误信息如下:java.lang.ClassCastException: com.sun.faces ...

  5. 解决：laravel出现Please provide a valid cache path.

    SVN检出版本库上的项目后,访问首页出现如下提示: Please provide a valid cache path. 解决方法如下: 1.确保storage目录下有如app,framework,v ...

  6. 用原生javascript实现最简单的发布者-订阅者模式

    http://www.cnblogs.com/surahe/p/6065778.html 发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案.比如,我们可以订阅 ajax 请求的 ...

  7. 如何将django部署从顶级目录迁移到子目录下(NGINX UWSGI DJANGO)

    因为公司网站合并,要将我们的DJANGO项目从IP的顶级目录迁移到域名的二级目录. 以前硬编码的URL可惨了. 还涉及到upload目录,静态目录,websocket目录. 全用{% url %}问题 ...

  8. (转)代码中实现button

    链接地址:http://www.cnblogs.com/hukezhu/p/4500206.html 随着iOS开发发展至今,在UI制作上逐渐分化为了三种主要流派:使用代码手写UI及布局:使用单个xi ...

  9. CentOS 7.0 服务管理 – systemctl 命令

    转载自:http://linux.it.net.cn/CentOS/fast/2014/0720/3212.html CentOS 7.0中已经没有service命令,而是启用了systemctl服务 ...

  10. Akka Cluster之集群分片

    一.介绍  当您需要在集群中的多个节点之间分配Actor,并希望能够使用其逻辑标识符与它们进行交互时,集群分片是非常有用的.你无需关心Actor在集群中的物理位置,因为这可能也会随着时间的推移而发生变 ...