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 相关文章推荐
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 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
PHP写日志的实现方法
2014/11/05 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python 字符串中的字符倒转
2008/09/06 Python
python原始套接字编程示例分享
2014/02/21 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Android分包MultiDex策略详解
2017/10/30 Python
机器学习10大经典算法详解
2017/12/07 Python
python微信好友数据分析详解
2018/11/19 Python
python协程之动态添加任务的方法
2019/02/19 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python try except else使用详解
2021/01/12 Python
详解Python中的Lock和Rlock
2021/01/26 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
婚假请假条格式及范文
2014/04/10 职场文书
暑期教师培训方案
2014/06/07 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书