Angularjs 1 中使用指令绑定点击事件
2016-10-20 23:57
537 查看
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的。
如html
Jquery给第一级a链接绑定事件代码像:
因为我之前看过文档说,Angularjs的Controller不处理Dom的操作,所以一直在找方法怎么处理和jQuery 一样绑定a的点击事件,在看了jQuery not working with ng-repeat results之后,原来可以将所有链接的单击事件,放在一个指令中。如果在Controller中绑定了ng-click,并操作了Dom元素,就不太规范了,使用指令会好一些。
html之后是
javascript:
原来指令是这样使用的。
如html
<ul id="main-menu"> <li class=""> <a href="javascript:;">Menu1</a> <ul class="sub-menu"> <li ><a href="javascript:;">--1</a></li> <li ><a href="javascript:;">--2</a></li> </ul> </li> <li class=""> <a href="javascript:;">Menu2</a> <ul class="sub-menu"> <li ><a href="javascript:;">--1</a></li> <li ><a href="javascript:;">--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:;" toggle-main-menu>Menu1</a> <ul class="sub-menu"> <li ><a href="javascript:;">--1</a></li> <li ><a href="javascript:;">--2</a></li> </ul> </li> <li class=""> <a href="javascript:;" toggle-main-menu>Menu2</a> <ul class="sub-menu"> <li ><a href="javascript:;">--1</a></li> <li ><a href="javascript:;">--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学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
- AngularJS中directive指令使用之事件绑定与指令交互用法示例
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
- AngularJS 使用绑定和模板指令
- AngularJS事件绑定的使用详解
- 使用RecyclerView绑定点击事件
- Angularjs 动态添加指令并绑定事件的方法
- AngularJs 的使用之双向绑定和指令
- 使用jquery当页面打开时,将修改样式的点击事件绑定到Dom
- Angularjs 动态添加指令并绑定事件
- 使用jquery当页面打开时,将修改样式的点击事件绑定到Dom
- Angularjs使用link为元素绑定响应事件
- 菜鸟AngularJS学习之路 【第二天】。(事件绑定指令 循环输出 控制器嵌套)
- AngularJS事件绑定的使用详解
- jquery使用live绑定toggle事件,第一次点击没有反应,第2次才起作用问题
- AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定
- AngularJS 使用元素与事件指令
- 使用jquery当页面打开时,将修改样式的点击事件绑定到Dom