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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
Vue 实现双向绑定的四种方法
Mar 16 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
对Session和Cookie的区分与解释
2007/03/16 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
python字符串替换示例
2014/04/24 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
pycharm远程调试openstack代码
2017/11/21 Python
python生成随机红包的实例写法
2019/09/02 Python
python随机数分布random均匀分布实例
2019/11/27 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
春节活动策划方案
2014/01/24 职场文书
素质拓展训练感想
2015/08/07 职场文书
Python编写冷笑话生成器
2022/04/20 Python