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 相关文章推荐
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
javascript运行机制之执行顺序理解
Aug 03 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的5个安全措施小结
2012/07/17 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP缓冲区用法总结
2016/02/14 PHP
Prototype String对象 学习
2009/07/19 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
pytorch中的inference使用实例
2020/02/20 Python
python 弧度与角度互转实例
2020/04/15 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
向女朋友道歉的话
2015/01/20 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
拖欠货款起诉状
2015/05/20 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript