Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的。
如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 1 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- 通过jQuery给<li>绑定点击事件
背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){ commonAjaxCall ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath(汇总)
iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath 首先分析有几种原因,以及相应的解决方法 1.UITableViewCell的userInterac ...
- ListView中响应item的点击事件并且刷新界面
---恢复内容开始--- 最近在在实现listview功能中遇到了这个问题: 点击事件写在了adapter的item中,不知道如何在listview的点击事件中更新数据的显示: 总结:1.要使用not ...
随机推荐
- C++的优秀特性5:模版
(转载请注明原创于潘多拉盒子) C++是强类型语言,而且恐怕是强类型语言里面类型最严格的.这意味着:1. C++变量的类型在定义时就确定了:2. 该类型在后续的生命期中不会改变.比如: int n = ...
- Linux Kconfig及Makefile学习
内核源码树的目录下都有两个文档Kconfig (2.4版本是Config.in)和Makefile.分布到各目录的Kconfig构成了一个分布式的内核配置数据库,每个Kconfig分别描述了所属目录源 ...
- ssh-keygen 无密码登陆需要注意一个问题
从今天开始记录一下工程上的小知识. ssh-keygen -t rsa cat id_rsa.pub >> authorized_keys后,切记,将authrorized_keys文件的 ...
- shared_ptr注意事项
对shared_ptr的Copy构造和Copy赋值,会改变引用计数,但是对shared_ptr中原始资源的Copy构造和Copy赋值,不会改变引用计数.因此存在下面的危险情况: 1.获取资源时,初始化 ...
- C# Socket基础(一)之启动异步服务监听
本文主要是以代码为主..NET技术交流群 199281001 .欢迎加入. //通知一个或多个正在等待的线程已发生事件. ManualResetEvent manager = new ManualRe ...
- ls显示文件大小时显示单位
在Linux中显示文件大小的时候,通常的做法是使用“ls -l”,显示的大小是文件的字节大小. 但是,如果文件比较大的话,显示起来不是特别易读,这个时候,可以使用“ls -lh”,就可以使用比较接近文 ...
- 基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- Golang学习 - sync 包
------------------------------------------------------------ 临时对象池 Pool 用于存储临时对象,它将使用完毕的对象存入对象池中,在需要 ...
- uboot 网络不通问题解决一例1
平台:Hi3531 PHY:RTL8211 现象:在uboot中执行ping命令的时候,总是超时. 过程: 使用uboot自带的phy操作命令mii读出的数据全是0xff.这里要介绍一下uboot中的 ...
- linux连接静态库
在项目中发现,使用 -l连接某个库时,如果存在同名的静态库(.a)和动态库(.so),默认会连接.so 那么如何指定连接静态库呢?如果有多个库,有些要连接静态库.有些要连接动态库,连接选项该如何指定呢 ...