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. CentOS 6.5 安装Nvidia驱动后出现"no screens found "错误

    参考官网文档 http://cn.download.nvidia.com/XFree86/Linux-x86_64/280.13/README/editxconfig.html 进入更改文档: vi ...

  2. 自己写的angularJs排序指令【原创】

    首先,给大家看看指令完成的效果.(请注意区分下面几张图片中,对象值的变化) 好了,效果图已经看完了,如果大家有兴趣的话可以继续往下看,接下来要讲的是关于angularJs中filter内置好的orde ...

  3. ida dump内存脚本

    auto i,fp; fp = fopen("d:\\dump.dex","wb"); for(i=r0;i<r0+0x20;i++) fputc(Byt ...

  4. java中创建多线程的方式

    在java中比较常用的有三种创建多线程的方式. 方式一:继承Thread类,要重写run方法. 在MyThread类 public class MyThread extends Thread { @O ...

  5. iomanip头

    #include <iomanip>主要是输入输出控制. Dec 十进制: hex 十六进制: oct 八进制: setw 设置宽度: setfill 设置填充值: setbase 将数字 ...

  6. ActionBarSherlock，SlidingMenu

    转自:http://www.chenwg.com/android/actionbarsherlock%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B.html Android3 ...

  7. PS2鼠标+LCD12864实验——终于OK 了

    抱着“不气馁.不放弃.誓不罢休.搞不定你我还能搞其他玩意吗”的心态,调试许久的PS2鼠标实验,终于在今天被我搞定了.发几张图显摆一下,嘿嘿...    左键按下+鼠标移动 右键按下+鼠标移动  中键按 ...

  8. 开始学习MFC

    <<对0基础MFC者的一点建议>>---------------------摘自某论坛lint2008的回复,不管对错,先看看.     因为上半年自己刚刚学了点MFC,算是对 ...

  9. html中DIv并排显示问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  10. 控制textbook输入字符

    在KeyPress事件中假如如下代码此实例表示可输入数字退格和“.”. 具体字符KeyChar见连接 http://www.cnblogs.com/linji/archive/2012/10/24/2 ...