前言：

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

1，动感超人

　　

上面的三个按钮，代表三个超人，在此想问下，哪些想看超人的朋友们是不是有种被骗了的感觉？

当我们的鼠标移动到哪个超人的身上的时候，就会输入这个超人所拥有的超能力（力量 + 敏捷 + 发光）

<!DOCTYPE html>

<html ng-app="MyModule">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>指令之间的交互</title>

</head>

<body>

    <div class="row">

        <div class="col-md-3">

            <superman strength>动感超人---力量</superman>

        </div>

        <div class="col-md-3">

            <superman strength speed>动感超人2---力量+敏捷</superman>

        </div>

        <div class="col-md-3">

            <superman strength speed light>动感超人3---力量+敏捷+发光</superman>

        </div>

    </div>

</body>

<script src="js/angular-1.3.0.js"></script>

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

</html>

ok,我们先创建了四个指令，一个是通过 E 的模式创建的叫做 superman，另外三个是通过 A 模式创建的 （strength、speed和light）。

var myModule = angular.module('MyModule',[]);

myModule.directive('superman',function(){

    return{

        scope:{},

        restrict:'AE',

        controller:function($scope){

            $scope.abilities=[];

            this.addStrength=function(){

                $scope.abilities.push("strength");

            };

            this.addSpeed = function(){

                $scope.abilities.push('speed');

            };

            this.addLight = function(){

                $scope.abilities.push('light');

            }

        },

        link:function(scope,element,attrs){

            element.addClass('btn btn-primary');

            element.bind('mouseenter',function(){

                console.log(scope.abilities);

            })

        }

    }

});

myModule.directive('strength',function(){

    return{

        require:'^superman',

        link:function(scope,element,attr,supermanCtl){

            supermanCtl.addStrength();

        }

    }

})

myModule.directive('speed',function(){

    return{

        require:'^superman',

        link:function(scope,element,attr,supermanCtl){

            supermanCtl.addSpeed();

        }

    }

})

myModule.directive('light',function(){

    return{

        require:'^superman',

        link:function(scope,element,attr,supermanCtl){

            supermanCtl.addLight();

        }

    }

})

上面的代码，最主要的就是 superman的这个指令，里面有些我们还没有认识的元素，我们下面介绍下：

  • scope:{}这个是创建一个独立的作用域。
  • controller，这个和我们angular中的控制器有些不同，这个主要是写一些指令的对外方法。

好，我们再来介绍下面的三个指令，我们就说一个就好了，其它的都一样的。

在这三个控制器也有新增的东西：

  • require:"^superman"，这个是告诉angularJS,当前的指令，依赖于哪个指令。我们现在的  strength指令依赖于superman的指令
  • link方法中的第四个参数，叫做父控制器，只要是指令写了require参数，就可以使用这个参数了，它可以访问父级contorller的方法中提供的一些属性和方法。

2，总结

　　我们从代码上可以看出，我们的三个超人拥有超能力多少是和拥有的指令多少成正比的。他们都有一个父的指令，父指令提供了超能力的力量（我们可以理解为数据）。子指令控制了是否追加这些功能。

AngularJs-指令和指令之间的交互（动感超人）的更多相关文章

  1. 【angularJS】Directive指令

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

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

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

  3. --@angularJS--指令与指令之间的交互demo

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

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

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

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

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

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

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

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

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

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

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

  9. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

随机推荐

  1. php 利用activeMq+stomp实现消息队列

    php 利用activeMq+stomp实现消息队列 一.activeMq概述 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J ...

  2. Hive history date mapping

    Hive history table mapping create table fdl_family as select * from (select 'acc1' as account,'famil ...

  3. WEB安全--CSRF防御

    CSRF漏洞防御主要可以从三个层面进行,即服务端的防御.用户端的防御和安全设备的防御. 服务端的防御 目前服务器端防御CSRF攻击主要有5种策略(我知道的就这么多):验证HTTP Referer字段, ...

  4. 【读书笔记《Android游戏编程之从零开始》】9.游戏开发基础（如何快速的进入 Android 游戏开发）

    1.不可盲目看API文档很多人在接触学习一门新的平台语言时,总喜欢先去探究一番API文档.先不说成效如何,至少编者认为这种方式不适合大部分人来效仿,主要原因在于 API 领域广泛,牵涉到的知识点太多, ...

  5. Python创建Cocos2d-x 2.2方法

    把创建项目做成一个批处理,当创建项目时可以省时省力很多. 操作步骤 1.在 E:\cocos2d-x-2.2.1\tools\project-creator 目录下创建 create_project. ...

  6. 浅谈CLR

    1.什么是CLR CLR(Common Language Runtime)公共语言远行时,是一个可由多种编程语言使用的“远行时”.CLR的核心功能(比如内存管理.程序集加载.安全性.异常处理和线程同步 ...

  7. 用于json的 .ashx 小细节

    public void ProcessRequest(HttpContext context) { switch (action) { case "attribute_field_valid ...

  8. 解决ios下的微信打开的页面背景音乐无法自动播放

    后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...

  9. *.location.href 用法:

    *.location.href 用法: top.location.href=”url”          在顶层页面打开url(跳出框架) self.location.href=”url”       ...

  10. 课程2——变量修饰关键字

    声明:本系列随笔主要用于记录c语言的常备知识点,不能保证所有知识正确性,欢迎大家阅读.学习.批评.指正!!你们的鼓励是我前进的动力.严禁用于私人目的.转载请注明出处:http://www.cnblog ...