Angularjs 1 中使用指令綁定點擊事件

項目中，模板中的菜單是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");
            });
        }
    }
});

原來指令是這樣使用的。