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. audio,video标签

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

  2. python 打印类的属性、方法

    打印变量db的类(class):[root@fuel ~]# pythonPython 2.6.6 (r266:84292, Jan 22 2014, 09:42:36)[GCC 4.4.7 2012 ...

  3. .NET反射应用

    .Net中,在编写框架时,反射是最长用的一个知识点,在这举个小例子,旨在说明反射如何应用:本文只程序中只涉及到System.Type的应用,通过这个类可以访问关于任何数据类型的信息,注释部分涉及到Sy ...

  4. 深入浅出Ajax（四）

    function initPage() { btn.onmouseover = buttonOver; btn.onmouseover = buttonOut; } 如上,浏览器只会运行指定的最后一个 ...

  5. cmd 3389

    1.2000系统 简要说一下如何进行DNS溢出攻击.我用的溢出利用程序是dns.exe,在CMD下运行它可以看到它的使用参数等信息.执行"dns -s IP"命令检测目标IP是否存 ...

  6. 利用MyEclipse连接数据库并自动生成基于注解或者XML的实体类

    一.利用MyEclipse连接数据库 1. 打开MyEclipse的数据库连接视图 然后在Other中找到"MyEclipse Database"中的DB Browser 2. 在 ...

  7. openssl windows编译 32位&64位

    openssl版本:openssl-1.0.0k 64位编译 1.编译环境: openssl-1.0.0a必须用vs2008编译(Open Visual Studio 2008 x64 Cross T ...

  8. eclipse代码提示配置

    打开 MyEclipse 6.5,然后“window”→ “Preferences” 2.选择“java”, 展开, “Editor”, 选择“Content Assist”. 3.选择“Conten ...

  9. [iOS]C语言技术视频-10-指针变量

    下载地址: 链接: http://pan.baidu.com/s/1jGjbaXg 密码: u2t9

  10. createNewFile()与createTempFile()的不同

    1, File 的 createNewFile() 方法:          createNewFile():返回值为 boolean:   方法介绍:当且仅当不存在具有此抽象路径名指定名称的文件时, ...