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的12招常用技巧分享
Aug 08 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
php注册登录系统简化版
2020/12/28 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python面向对象法实现图书管理系统
2019/04/19 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
亲子读书活动方案
2014/02/22 职场文书
2014年党务公开方案
2014/05/08 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL