jquery click event is not working with angular.js ng-repeat

Question

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 inside the HTML are static.

HTML:

<div>
<ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
        <a class="collapsible-list-parent">{{view.name}}</a>
        <ul class="collapsible-list secondary">
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Public Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="publicview in view.publicviews">
                        <a>{{publicview.title}}</a>
                    </li>
                </ul>
            </li>
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Private Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="privateview in view.privateviews">
                        <a>{{privateview.title}}</a>
                    </li>
                </ul>
            </li>   
        </ul>
    </li>
</ul>

Javascript:

define([ 'angular', 'controllers-module'], function(angular,
    controllers) {

    controllers.controller("ViewCtrl", [
        "$scope",
        "$rootScope",
        "directiveBinder",
        '$timeout',
        '$stateParams',
        '$resource',
        '$state',
        function($scope, $rootScope,directiveBinder, $timeout, $stateParams, $resource, $state) {

            $scope.engines = [ {
            name : 'name1',
            publicviews : [ {
                title : 'First public View'
            } ],
            privateviews : [ {
                title : 'First private View'
            } ]
        }, {
            name : 'name2',
            publicviews : [ {
                title : 'Second public View'
            } ],
            privateviews : [ {
                title : 'Second private View'
            } ]
        } ];

        $('.collapsible-list-parent').click(function(e) {
            e.preventDefault();
            $(this).next().slideToggle('fast');
            if ($(this).parent().hasClass('open')) {
                $(this).parent().removeClass('open');
            } else {
                $(this).parent().addClass('open');
            }
        });
    });

Answer 1

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...

});

Answer 2

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.

Answer 3

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