Angularjs中使用指令绑定点击事件的方法

原文地址：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 nofol
4000
low" 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");

      });

    }

  }

});