Angularjs中使用指令绑定点击事件的方法
来源:互联网 发布:网络社区模式案例分析 编辑:程序博客网 时间:2024/05/01 11:04
原文地址:http://www.jb51.net/article/110020.htm
项目中,模板中的菜单是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");
});
}
}
});
- Angularjs中使用指令绑定点击事件的方法
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
- AngularJS事件绑定的使用详解
- AngularJS中使用$.ajax绑定失败的处理方法
- 给鼠标绑定指令事件,指令调用控制器中方法
- AngularJs 的使用之双向绑定和指令
- angularjs 绑定enter事件的两种方法
- 关于angularjs的绑定事件
- AngularJS 使用绑定和模板指令
- angularjs指令的使用
- AngularJS中,如何给动态生成的元素绑定事件
- Button点击事件绑定中如何传递带参数的方法
- Vue在列表中绑定点击事件后的处理方法
- 使用RecyclerView绑定点击事件
- angularJs指令的3种绑定策略
- AngularJS 指令中的属性的绑定方式
- angularJs指令的3种绑定策略
- 关于iPhone的点击事件绑定无效的处理方法
- 关于Android中ListView的addHeaderView()的方法和ListView滑动不流畅的解决方法
- redis专题命令语法介绍之通用KEY
- CENTOS7搭建伪分布式HADOOP2.7.3
- Mosquitto集群搭建
- winform 替换word中指定内容
- Angularjs中使用指令绑定点击事件的方法
- Android ListView不同的item布局实现
- MySql怎样安装(命令安装)
- 动画特效wow.js的用法
- Android 序列化
- 一句话脚本系列之统计文件夹下各种后缀名的文件个数
- 几种数据库连接的URL
- 实验1
- mysql创建数据库及表时设置字符集