Jquery Click Event Is Not Working With Angular.js Ng-repeat

I have a nested (tertiary) menu list with a jquery click event on the back. jQuery click does not fire when the menu item is clicked. The jQuery event works well if the values insi

Solution 1:

Because the elements are added dynamically by ng-repeat the .click event is not binded to them. Try to use .delegate

$( "ul" ).delegate( ".collapsible-list-parent", "click", function() {
  // code here
});

Solution 2:

When we use ng-repeat and need to trigger a jquery click event just try this it worked for me.

$(document).on("click", ".className", function() {

//your code here...

});

Solution 3:

I don't think using jQuery code in an angularjs controller is the right way to do this, a sample to do the same without the animation will be like

var app = angular.module('my-app', [], function() {

})

app.controller('ViewCtrl', function($scope) {
  $scope.views = [{
    name: 'name1',
    publicviews: [{
      title: 'First public View'
    }],
    privateviews: [{
      title: 'First private View'
    }]
  }, {
    name: 'name2',
    publicviews: [{
      title: 'Second public View'
    }],
    privateviews: [{
      title: 'Second private View'
    }]
  }];
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="my-app"><ulclass="collapsible-list"ng-controller="ViewCtrl"><liclass="collapsible-list-subnav"ng-repeat="view in views"><aclass="collapsible-list-parent"ng-click="open = !open">{{view.name}}</a><ulclass="collapsible-list secondary"ng-show="open"><liclass="collapsible-list-subnav"><aclass="collapsible-list-parent"ng-click="popen = !popen">Public Views</a><ulclass="collapsible-list tertiary"ng-show="popen"><ling-repeat="publicview in view.publicviews"><a>{{publicview.title}}</a></li></ul></li><liclass="collapsible-list-subnav"><aclass="collapsible-list-parent"ng-click="ropen = !ropen">Private Views</a><ulclass="collapsible-list tertiary"ng-show="ropen"><ling-repeat="privateview in view.privateviews"><a>{{privateview.title}}</a></li></ul></li></ul></li></ul></div>

---

If you want to use animations you can make use of angularjs animation which uses css3 animations.