1、index.html:

<!DOCTYPE HTML>
<html ng-app="app">
<head>
    <title>custom-directive</title>
    <meta charset="utf-8">    
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/angular.js"></script>
    <!--<script src="../js/jquery-1.10.2.min.js.js"></script>-->
</head>
<body>
<!-- 下面是指令与指令间的交互demo. -->
<div class="container">
    <div class="row">
        <div class="col-md-3"><superman strength>动感超人+力量</superman></div>
    </div>
    <div class="row">
        <div class="col-md-3"><superman strength speed>动感超人+力量+速度</superman></div>
    </div>
    <div class="row">
        <div class="col-md-3"><superman strength speed light>动感超人+力量+速度+发光</superman></div>
    </div>
</div>

<script src="./directive-directive.js"></script>
</body>
</html>

2、directive-directive.js：

var myModule = angular.module("app",[]);

myModule.directive('superman',function(){
    return {
        restrict:'AE',
        scope:{},
        controller:function($scope){
            $scope.abilities = [];        //定义能力集合
            this.addstrength = function(){//指令中的controller是一个公开暴露的api接口，一般是供后面定义该标签内的属性指令调用执行的
                $scope.abilities.push("strength");
            };
            this.addspeed = function(){
                $scope.abilities.push("speed");
            };
            this.addlight = function(){
                $scope.abilities.push("light");
            };
        },
        link:function(scope,element,attrs){//link里面可以操纵DOM元素本身以及元素属性还有全局scope作用域内的方法
            element.addClass('btn btn-primary');
            element.bind("mouseenter", function() {
                console.log(scope.abilities);
            });
        }
    }
}).directive('strength',function(){//一个属性代表一个值
    return {//restrict:这里不写默认的是属性指令
        require:'^superman',//依赖superman指令，并在link方法中注入第四个参数supermanCtrl，即superman的控制器参数,并通过该参数调用控制器里面的暴露方法
        link:function(scope,element,attrs,supermanCtrl){
            supermanCtrl.addstrength();
        }
    }
}).directive('speed',function(){
    return {
        require:'^superman',
        link:function(scope,element,attrs,supermanCtrl){
            supermanCtrl.addspeed();
        }
    }
}).directive('light',function(){
    return {
        require:'^superman',
        link:function(scope,element,attrs,supermanCtrl){
            supermanCtrl.addlight();
        }
    }
});

--@angularJS--指令与指令之间的交互demo的更多相关文章

  1. --@angularJS--指令与控制器之间的交互demo

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

  2. AngularJs-指令和指令之间的交互（动感超人）

    前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...

  3. 【angularJS】Directive指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...

  4. 【AngularJS】—— 11 指令的交互

    前面基本了解了指令的相关内容: 1 如何自定义指令 2 指令的复用 本篇看一下指令之间如何交互.学习内容来自<慕课网 指令3> 背景介绍 这例子是视频中的例子,有一个动感超人,有三种能力, ...

  5. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  6. angularJS在创建指令需要注意的问题(指令中使用ngRepeat)

    现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...

  7. 关于Angularjs写directive指令传递参数

    包子又来啦.... 在Angularjs当中,我们可能会经常要写directive指令.但是指令如果要共用的话,肯定是有细微的差别的,所以这些差别可能需要一个参数来决定 所以如何在指令中传递参数呢.. ...

  8. angularjs学习之六（angularjs中directive指令的一般编程事件绑定 模板使用等）

    angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...

  9. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

随机推荐

  1. 关于Tcpreplay

    tcpprep -p -o /root/Desktop/ZS/Tcpreplay/cache_test.cache -i /root/Desktop/ZS/Tcpreplay/9.17.pcap tc ...

  2. j2ee常用包的作用

    1.antlr-2.7.7.jar 呵呵 一句话,没有此包,hibernate不会执行hql语句   2.aopalliance-1.0.jar 这个包是AOP联盟的API包,里面包含了针对面向切面的 ...

  3. （转）Hadoop MapReduce链式实践--ChainReducer

    版本:CDH5.0.0,HDFS:2.3.0,Mapreduce:2.3.0,Yarn:2.3.0. 场景描述:求一组数据中按照不同类别的最大值,比如,如下的数据: data1: A,10 A,11 ...

  4. H5 video跨域问题

    事情是这样的,今天上午下班前,朋友发我一个js文件,说视频不播放,核心代码大概是这样子的: var player = document.createElement('video'); var sour ...

  5. PAT (Advanced Level) 1062. Talent and Virtue (25)

    简单排序.题意较长. #include<cstdio> #include<cstring> #include<cmath> #include<queue> ...

  6. java中单例设计模式

    在java中创建单例的方式主要有三种:饿汉式.懒汉式.登记式.以下内容均是摘抄自 http://blog.csdn.net/jason0539/article/details/23297037/ 一. ...

  7. VS2012添加对DirectX SDK中需要文件的引用

    error LNK2019: 无法解析的外部符号 _DirectDrawCreateEx@16,该符号在函数 "int __cdecl DD_Init(int,int,int)" ...

  8. Claris and XOR(模拟）

    Claris and XOR Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  9. phpcms 细节

    Phpcms V9采用if语句判断当前栏目高亮.判断分类信息是否过期 10月05, 2013 by SJY 在用PC V9建站的时候,很多朋友会想到Phpcms V9判定当前栏目,让当前栏目高亮的功能 ...

  10. [Big Data]Spark

    SPARK Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop MapReduce的通用并行框架,Spark,拥有Hadoop MapRed ...