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 相关文章推荐
json简单介绍
Jun 10 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
vue实现登录功能
Dec 31 Vue.js
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制作静态网站的模板框架(三)
2006/10/09 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
请求时token过期自动刷新token操作
2020/09/11 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python中标准模块importlib详解
2017/04/16 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python中的函数作用域
2018/05/07 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
如何设置Java的运行环境
2013/04/05 面试题
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
争论的故事教学反思
2014/02/06 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
IT工程师岗位职责
2014/07/04 职场文书
广播体操比赛主持词
2015/06/29 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python