本实例主要展示controller和link参数的使用.以及多个指令同时作用的情况.

 <!DOCTYPE html>

 <html ng-app="myModule">

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <div>

     <div>

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

     </div>

     <div>

         <superman strength speed>动感超人---力量+速度</superman>

     </div>

     <div>

         <superman strength speed light>动感超人---力量+速度+发光</superman>

     </div>

 </div>

 </body>

 <script type="text/javascript" src="../js/angular1.4.3.js"></script>

 <script type="text/javascript">

 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.bind("mouseenter", function () {

                     console.log(scope.abilities);

                 })

             }

         }

     });

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

         return{

             require:"^superman",

             link: function (scope, element, attrs, supermanCtrl) {

                 supermanCtrl.addStrength();

             }

         }

     });

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

         return{

           require:"^superman",

             link: function (scope, element, attrs, supermanCtrl) {

                 supermanCtrl.addSpeed();

             }

         };

     });

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

         return{

             require:"^superman",

             link: function (scope,element,attrs,supermanCtrl) {

                 supermanCtrl.addLight();

             }

         }

     })

 </script>

 </html>

angularJs编写多指令的情况的更多相关文章

  1. AngularJs编写指令

    <!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta ...

  2. AngularJS移动开发中的各种坑

    捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...

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

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

  4. AngularJS开发经验(转)

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...

  5. AngularJS移动开发中的坑汇总

    使用AngualrJs开发移动App已经快半年了,逐渐积累了非常多AngularJS的问题,特别是对于用惯了Jquery的开发人员,转到AngularJS还是须要克服非常多问题的.不像Jquery那样 ...

  6. AngularJS 2调用.net core WebAPI的几个坑

    前几天,按照AngularJS2的英雄指南教程走了一遍,教程网址是http://origin.angular.live/docs/ts/latest/tutorial/. 在步骤完成后,又更进一步,在 ...

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

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

  8. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  9. AngularJS开发经验

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...

随机推荐

  1. ASP.Net：Table类的使用

    在做Asp.Net的时候,很多情况下数据的绑定都是使用GridView或者我之前提到的ListView,但是这两个适合用于数据的绑定,而有些时候,数据需要在后台进行处理,例如数据据内地某一条数据的特殊 ...

  2. python之selenium

    selenium是处理异步加载的一种方法 总的来说是操作浏览器访问来获取自己想要的资料 优点是浏览器能看到的都能爬下来,简单有效,不需要深入破解网页加载形式 缺点是加载的东西太多,导致爬取速度变慢 # ...

  3. hadoop spark学习笔记

    http://www.csdn.net/article/2015-06-08/2824889 hive:是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sq ...

  4. 《腾讯敏捷框架TAPD》研究

    1         框架结构 1.1         产品 TAPD采用FDD模式开发,FDD即特征驱动开发. FDD的核心是面向产品的功能点,但这个功能点是从客户角度出发的,并不是从系统角度出来的. ...

  5. SET Transaction Isolation Level Read语法的四种情况

    转自:http://www.cnblogs.com/qanholas/archive/2012/01/04/2312152.html 存储过程:SET Transaction Isolation Le ...

  6. ASP.NET MVC3在页面上获取当前控制器名称、Action名称以及路由参数

    参考:http://ulfqbpl.blog.163.com/blog/static/87783552201272824843607/ 获取控制器名称: RouteData.Values[" ...

  7. js 如何生成二维数组

    想了几种方法都不能很好的,用js定义二维数组.这种定义,指的是:定义按需确认数组大小. 网上看了下,都是用for循环创建,大小必须提前设定.不是我想要的.(感觉不能和php一样,真是麻烦!) 先贴出代 ...

  8. ASP.NET环境下配置FCKEditor并上传图片及其它文件

    文章转自:http://blog.sina.com.cn/s/blog_568e66230100hy6a.html FCKEditor于2009年被更名为新一代的CKEditor和CKFinder,见 ...

  9. SQL SERVER 2008安装时出现不能在控件上调用 Invoke 或 BeginInvoke错误 解决方法

    或者 SQL SERVER 2008安装时要求重启,但重启后仍要求重启.都可以使用此方法. 注册表的 "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet ...

  10. FDATool使用

    1. 幅值有两种单位可选,linear和db.切换单位时Toolbox的图例会跟着变化,可以看出两种单位下参数含义不太一样. 线性坐标:例如设置为0.01/0.01,表示通带幅度0.99~1.01,阻 ...