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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Vue指令实现OutClick的示例
Nov 16 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
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python实现的弹球小游戏示例
2017/08/01 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python自动化生成IOS的图标
2018/11/13 Python
六行python代码的爱心曲线详解
2019/05/17 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python适配器模式代码实现解析
2019/08/02 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
测控技术与仪器个人求职信范文
2013/12/30 职场文书
童装店创业计划书
2014/01/09 职场文书
安全大检查实施方案
2014/02/22 职场文书
争做文明公民倡议书
2019/06/24 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android