Use commands in Angularjs to bind click events. Use angularjs commands.

Use commands in Angularjs to bind click events. Use angularjs commands.

In the project, the menu in the template is controlled by jQuery and cannot be run in Angularjs, because the menu item is after ng-repeat.

Such as 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 binds the Event code to level 1 a link like:

$(function(){ $("#main-menu li a").click(function(e){   if ($(this).next().hasClass('sub-menu') === false) {        return;     }     console.log("click"); });});

As I have read the document earlier, Angularjs Controller does not handle Dom operations, so I have been looking for a way to handle click events bound to a like jQuery, after reading jQuery not working with ng-repeat results, you can place the click events of all links in one command. If ng-click is bound to the Controller and Dom elements are operated, the usage of commands will be better.

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");      });    }  }});

The original command is used in this way. The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.