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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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
php 批量替换html标签的实例代码
2013/11/26 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
thinkphp缓存技术详解
2014/12/09 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
js压缩利器
2007/02/20 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Python创建字典的八种方式
2019/02/27 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
自我鉴定四大框架
2014/01/17 职场文书
合作经营协议书范本
2014/04/17 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书