Angularjs中使用指令绑定点击事件的方法


Posted in Javascript onMarch 30, 2017

项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的。

如html

<ul id="main-menu">
 <li class="">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Menu1</a>
  <ul class="sub-menu">
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--1</a></li>
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--2</a></li>
  </ul>
 </li>
  <li class="">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Menu2</a>
  <ul class="sub-menu">
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--1</a></li>
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--2</a></li>
  </ul>
 </li>
</ul>

Jquery给第一级a链接绑定事件代码像:

$(function(){
 $("#main-menu li a").click(function(e){
   if ($(this).next().hasClass('sub-menu') === false) {
        return;
     }
     console.log("click");
 });
});

因为我之前看过文档说,Angularjs的Controller不处理Dom的操作,所以一直在找方法怎么处理和jQuery 一样绑定a的点击事件,在看了jQuery not working with ng-repeat results之后,原来可以将所有链接的单击事件,放在一个指令中。如果在Controller中绑定了ng-click,并操作了Dom元素,就不太规范了,使用指令会好一些。

html

<ul id="main-menu">
 <li class="">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" toggle-main-menu>Menu1</a>
  <ul class="sub-menu">
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--1</a></li>
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--2</a></li>
  </ul>
 </li>
  <li class="">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" toggle-main-menu>Menu2</a>
  <ul class="sub-menu">
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--1</a></li>
    <li ><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >--2</a></li>
  </ul>
 </li>
</ul>

javascript:

.directive("toggleMainMenu", function() {
  return {
    restrict: "A",
    link: function(scope, elem, attrs) {
      $(elem).click(function() {
        if($(this).next().hasClass('sub-menu') === false) {
          return;
        }
      console.log("click");
      });
    }
  }
});

原来指令是这样使用的。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue中使用ueditor富文本编辑器
Feb 08 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 #Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 #Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 #Javascript
vue分类筛选filter方法简单实例
Mar 30 #Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 #Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 #Javascript
canvas绘制一个常用的emoji表情
Mar 30 #Javascript
You might like
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python uuid模块使用实例
2015/04/08 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
岗位职责范本
2013/11/23 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
停发工资证明范本
2015/06/12 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
css3 选择器
2022/05/11 HTML / CSS
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS