欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 23:16:39
项目中,模板中的菜单是jquery控制的,在angularjs中就运行不到了,因为菜单项是ng-repeat之后的。 如html

    项目中,模板中的菜单是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 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>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");
          });
        }
      }
    });

    原来指令是这样使用的。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。