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 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 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字符串按照单词进行反转的方法
2015/03/14 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Vue组件化开发思考
2018/02/02 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python初学者常见错误详解
2019/07/02 Python
python热力图实现简单方法
2021/01/29 Python
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
const和static readonly区别
2013/05/20 面试题
大学毕业感言
2014/01/10 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
工作鉴定评语
2014/05/04 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
公司周年庆典致辞
2015/07/30 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android