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 动态改变图片大小
Jun 11 Javascript
JS 控制CSS样式表
Aug 20 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
浅谈javascript的闭包
Jan 23 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
JS实现无限轮播无倒退效果
Sep 21 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
javascript canvas实现雨滴效果
Jun 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面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
python基础教程项目四之新闻聚合
2018/04/02 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
商务助理岗位职责
2013/11/13 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
大型活动组织方案
2014/05/10 职场文书
环保志愿者活动总结
2014/06/27 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python