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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
JavaScript XML操作 封装类
Jul 01 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php设计模式之委托模式
2016/02/13 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
php实现头像上传预览功能
2017/04/27 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
优化javascript的执行速度
2010/01/23 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
企业内控岗位的职责
2014/02/07 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
市场策划求职信
2014/08/07 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Python实现批量自动整理文件
2022/03/16 Python