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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
jquery 插件学习(四)
Aug 06 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
vue递归实现树形组件
Jul 15 Vue.js
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
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开发工具
2015/11/09 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
浅析Python多线程下的变量问题
2015/04/28 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python的pip有什么用
2020/06/17 Python
python实现图像外边界跟踪操作
2020/07/13 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
学前教育学生自荐信范文
2013/12/31 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
学生保证书范文
2014/04/28 职场文书
长城导游词300字
2015/01/30 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电