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. HDU 2087 剪花布条（KMP基础应用）

    KMP基础,注意输入 #include<cstdio> #include<cstring> #include<iostream> using namespace s ...

  2. PAT (Advanced Level) 1072. Gas Station (30)

    枚举一下选的位置,每次算一下就可以了. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  3. USACO Section 1.1 Friday the Thirteenth 解题报告

    题目 题目描述 黑色星期五是否真的是一件不同寻常的事情?按理来说每个月的13号可能是星期一,或者是星期二...或者是星期天,但是黑色星期五的存在让我们不禁开始猜想,难道每个月的13号刚好是星期五的频率 ...

  4. Python3基础 Python的函数都有返回值 无指定返回值的函数 返回NONE对象

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  5. Android init.rc文件浅析

    Android init.rc文件浅析 分类: Android2012-04-13 18:00 13149人阅读 评论(2) 收藏 举报 androidservicepathactionsocketc ...

  6. 转发：iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

    -- iOS事件全面解析 转载来自崔江涛(KenshinCui) 链接:http://www.cnblogs.com/kenshincui/p/3950646.html 概览 iPhone的成功很大一 ...

  7. SpringMVC接收页面表单参数-java-电脑编程网

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

  8. input有许多，点击按钮使用form传递文本框的值

    input有许多,点击按钮使用form传递文本框的值 <form name="form1" method="post" action="< ...

  9. Android高斯模糊技术，实现毛玻璃效果（转）

    本博客转自郭霖公众号:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650235930&idx=1&sn=e328 ...

  10. jQuery扩展两类函数（对象调用，静态调用）

    作者:zccst 先看小例子: $(function(){ //扩展方式1-通过对新调用 $.fn.each1=function(){ console.log("hehehehe$.fn.f ...