AngularJS 指令的交互详解及实例代码


Posted in Javascript onSeptember 14, 2016

背景介绍

这例子是视频中的例子,有一个动感超人,有三种能力,力量strength,速度speed,发光light。

这三种能力作为三种属性,定义动感超人作为一个标签,只要添加对应的属性就能拥有该能力。

为了便于结果的展示,为标签添加鼠标的响应事件,当鼠标移动到对应的标签上就会触发一个方法,打印出具备的能力。

程序分析

html部分的代码如下:       

<div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>

下面看看如何实现,首先依然是创建一个模块:

var myAppModule = angular.module("myApp",[]);

在该模块的基础上,创建标签superman,与前面类似。

myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          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,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });

这里不同的是,在方法内部有一个controller属性,这个并不是ng-controller这种控制器,而是指令对外开放的一个接口,里面声明的方法,在外部可以作为公开的方法使用,其他的指令可以通过依赖,使用这些方法。

接下来再创建三个能力对应的指令

myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });

三个指令的代码都差不多,其中require指定了依赖的指令。

link中多了一个参数supermanCtrl,这个参数猜想是superman中的controller,所以命名采用superman+Ctrl的方式。

【由于不懂内部原理,这里仅仅是猜想,但是实验证明,如果改变这个参数的名字,会报错。】

声明了这三个指令,就可以把这三个指令当做super的属性来使用,当注明该属性时,就会触发内部的link内的方法,调用superman中公开的方法。

  总结起来,指令的交互过程:

1 首先创建一个基本的指令,在controller属性后,添加对外公开的方法。

2 创建其他交互的指令,在require属性后,添加对应的指令依赖关系;在link中调用公开的方法

全部程序代码:

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>

    <div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);

      myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          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,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });
      myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });
    </script>
  </body>
</html>

 

 运行结果:

AngularJS 指令的交互详解及实例代码

        以上就是对AngularJS 指令的交互的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 #Javascript
什么是JavaScript注入攻击?
Sep 14 #Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 #Javascript
再谈javascript注入 黑客必备!
Sep 14 #Javascript
AngularJS 表达式详解及实例代码
Sep 14 #Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 #Javascript
js注入 黑客之路必备!
Sep 14 #Javascript
You might like
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
python文件名和文件路径操作实例
2017/09/29 Python
Django数据库表反向生成实例解析
2018/02/06 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
What is EJB
2016/07/22 面试题
春季防火方案
2014/05/10 职场文书
学校春季防火方案
2014/06/08 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
党员剖析材料范文
2014/09/30 职场文书
单方投资意向书
2015/05/11 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Python学习之时间包使用教程详解
2022/03/21 Python