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实现预览待上传的本地图片
Mar 15 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
Javascript 数组排序详解
Oct 22 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
javascript实现简易计算器
2017/02/01 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python随机生成库faker库api实例详解
2019/11/28 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
如何完美的建立一个python项目
2020/10/09 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
惠普香港官方商店:HP香港
2019/04/30 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
5.1手机促销活动
2014/01/17 职场文书
2014年元旦活动方案
2014/02/15 职场文书
《将心比心》教学反思
2014/04/08 职场文书
机关办公室岗位职责
2014/04/16 职场文书
和睦家庭事迹
2014/05/14 职场文书
青年文明号汇报材料
2014/12/23 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python