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 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
js中settimeout方法加参数
Feb 28 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
js验证框架实现代码分享
May 18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
js+css实现全屏侧边栏
Jun 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
PHP 文件缓存的性能测试
2010/04/25 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
清除输入框内的空格
2016/12/21 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
详解AngularJS之$window窗口对象
2018/01/17 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
Vue实现简易购物车页面
2020/12/30 Vue.js
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
django将数组传递给前台模板的方法
2019/08/06 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
python如何操作mysql
2020/08/17 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
幼师自荐信范文
2013/10/06 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
项目开发计划书
2014/01/09 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
《观舞记》教学反思
2014/04/16 职场文书
担保贷款承诺书
2015/04/30 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
python实现的web监控系统
2021/04/27 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS