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'
    }]
  }];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
      <a class="collapsible-list-parent" ng-click="open = !open">{{view.name}}</a>
      <ul class="collapsible-list secondary" ng-show="open">
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="popen = !popen">Public Views</a>
          <ul class="collapsible-list tertiary" ng-show="popen">
            <li ng-repeat="publicview in view.publicviews">
              <a>{{publicview.title}}</a>
            </li>
          </ul>
        </li>
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="ropen = !ropen">Private Views</a>
          <ul class="collapsible-list tertiary" ng-show="ropen">
            <li ng-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.