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 相关文章推荐
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
layui table设置某一行的字体颜色方法
Sep 05 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伪静态写法附代码
2008/06/20 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
vue按需加载实例详解
2019/09/06 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
python 实现端口扫描工具
2020/12/18 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
后勤工作职责
2013/12/22 职场文书
安全环保标语
2014/06/09 职场文书