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. css叠加原则，就近原则

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  2. HDU 3339 最短路+01背包

    In Action Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  3. GB2312 编码

    GB2312编码范围:A1A1-FEFE,其中汉字编码范围:B0A1-F7FE. GB2312编码是第一个汉字编码国家标准,由中国国家标准总局1980年发布,1981年5月1日开始使用.GB2312编 ...

  4. window下查看端口命令

    原文:http://blog.csdn.net/ldl22847/article/details/7181210 http://blog.csdn.net/xinxin19881112/article ...

  5. Java谜题——库谜题

    1.Java中的不可变对象和可变对象 (1)不可变类:当你获得这个类的实例的引用之后,你不可以改变这个实例的内容.比如:String,BigInteger,BigDecimal,还有基本数据类型的封装 ...

  6. ibatis参数传递小技巧 - 疯狂的菠菜 - ITeye技术网站

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. HDU 5616 Jam's balance

    背包.dp[i]=1表示i这种差值能被组合出来,差值有负数,所以用sum表示0,0表示-sum,2*sum表示sum. 询问X的时候,只需看dp[sum+X]或者dp[sum-X]是否有一个为1,注意 ...

  8. gtk

    GTK官网:www.gtk.org sudo apt-get install build-essential 安装GTK开发套件: sudo apt-get install libgtk2.0-dev ...

  9. 系统管理员必须掌握的20个Linux监控工具

    需要监控Linux服务器系统性能吗?尝试下面这些系统内置或附件的工具吧.大多数Linux发行版本都装备了大量的监控工具.这些工具提供了能用 作取得相关信息和系统活动的量度指标.你能使用这些工具发现造成 ...

  10. PHP header使用

    header()函数的作用是:发送一个原始 HTTP 标头[Http Header]到客户端.标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的字串,在标头与 HT ...