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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
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
ezSQL PHP数据库操作类库
2010/05/16 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
mac下安装nginx和php
2013/11/04 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php备份数据库类分享
2015/04/14 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
js实现日历与定时器
2017/02/22 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
详解Python中的条件判断语句
2015/05/14 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
超市采购员岗位职责
2014/02/01 职场文书
学生会部长竞聘书
2014/03/31 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书