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 相关文章推荐
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
Vue.js基础知识小结
Jan 13 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
微信小程序如何获取地址
Dec 24 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
js单词形式的运算符
2014/05/06 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
javascript实现连续赋值
2015/08/10 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
django实现前后台交互实例
2017/08/07 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python按照多个条件排序的方法
2019/02/08 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
大学生活学习的自我评价
2013/12/03 职场文书
双十佳事迹材料
2014/01/29 职场文书
军训口号
2014/06/13 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript