项目中，模板中的菜单是jQuery控制的，在Angularjs中就运行不到了，因为菜单项是ng-repeat之后的。
如html
<ul> <li> <a href="javascript:;" >Menu1</a> <ul> <li ><a href="javascript:;" >--1</a></li> <li ><a href="javascript:;" >--2</a></li> </ul> </li> <li> <a href="javascript:;" >Menu2</a> <ul> <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的点击事件,在看了之后，原来可以将所有链接的单击事件，放在一个指令中。如果在Controller中绑定了ng-click,并操作了Dom元素，就不太规范了，使用指令会好一些。
html
<ul> <li> <a href="javascript:;" toggle-main-menu>Menu1</a> <ul> <li ><a href="javascript:;" >--1</a></li> <li ><a href="javascript:;" >--2</a></li> </ul> </li> <li> <a href="javascript:;" toggle-main-menu>Menu2</a> <ul> <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"); }); } } });