AngularJS中directive指令使用之事件绑定与指令交互用法示例


Posted in Javascript onNovember 22, 2016

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:

AngularJS中模板的使用,事件绑定以及指令与指令之间的交互

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body ng-controller="ShieldController">
    <div>
      <who></who>
    </div>
    <div>
      <button you-btn></button>
    </div>
    <theshield reigns>343</theshield>
    <theshield reigns>fdhg</theshield>
    <theshield rollins>hhh</theshield>
    <theshield ambros>kkk</theshield>
  </body>
  <script src="./js/angular.min.js"></script>
  <script>
    var app = angular.module('myapp',[]);
    /*=======================1. 模板的使用 ========================*/
    app.directive('who',function(){
      return {
        restrict:"E",       //元素element 的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = 'sdfhkj'; //这个优先级别最高
        },
        //templateUrl:"param.html", //这个不显示 优先级别最低
        template:"<h1>jkdhf</h1>" //这个显示 优先级别其次
      };
    });
    /*=======================2. 事件的绑定 ========================*/
    app.directive('youBtn',function(){
      return {
        restrict:"A", //attribute 属性的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = 'my btn';
          //事件绑定
          element.bind('mouseenter',function(){
            element[0].innerHTML = 'your btn';
          });
          element.bind('mouseleave',function(){
            element[0].innerHTML = 'her btn';
          });
        }
      };
    });
    /*=======================3. 元素 属性 控制器之间的交互========================*/
    app.controller('ShieldController',function($scope){
      $scope.shieldNames = [];
      this.addReigns = function(){
        $scope.shieldNames.push("reigns:jjj");
      }
      this.addRollins = function(){
        $scope.shieldNames.push("Rollins:hhh");
      }
      this.addAmbros = function(){
        $scope.shieldNames.push("Ambros:ggg");
      }
    })
    .directive('reigns',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addReigns();
       }
     };
    })
    .directive('rollins',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addRollins();
       }
     };
    })
    .directive('ambros',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addAmbros();
       }
     };
    })
    .directive('theshield',function(){
      return {
        restrict:"E",
        controller:"ShieldController", //指定控制器
        scope:{},           //清空该指令处的$scope 值
        link:function(scope,element,attrs){
          element.bind('mouseenter',function(){ //对于该指令所对应的元素绑定对应的事件
            console.log(scope.shieldNames);
          });
        }
      };
    });
  </script>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jquery offset函数应用实例
Nov 14 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 #Javascript
详解js中Json的语法与格式
Nov 22 #Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 #Javascript
javascript入门之string对象【新手必看】
Nov 22 #Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 #Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 #Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 #Javascript
You might like
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
PHP操作数组相关函数
2011/02/03 PHP
基于empty函数的判断详解
2013/06/17 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
Vue实现导航栏菜单
2020/08/19 Javascript
python链接Oracle数据库的方法
2015/06/28 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python实现的计算器功能示例
2018/04/26 Python
python版本单链表实现代码
2018/09/28 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
如何唤起类中的一个方法
2013/11/29 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
党员志愿者活动方案
2014/08/28 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript