Как заставить функцию jquery работать с angularJS?

Question

У меня есть аккордеонное меню, которое использует jQuery в моем приложении angularJS.В настоящее время он не работает так, как должен.Я закомментировал display: none; для .menu-navigation ul ul в css, чтобы показать, что у него есть некоторая функциональность, просто неправильная сортировка.Я также не уверен, где разместить ng-click в HTML.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
			
 $scope.accMenuItem = function(e) {
  angular.element(".menu-navigation ul ul").slideUp(),
  angular.element(this).next().is(":visible") ||
  angular.element(this).next().slideDown(),
  e.stopPropagation()
 };

 $scope.accSubMenuItem = function(e) {
  angular.element(".sub-menu-navigation ul").slideUp(),
  angular.element(this).next().is(":visible") ||
  angular.element(this).next().slideDown(),
  e.stopPropagation()
 };

});

.menu {
  width: 100%;
}

.menu-navigation ul,
.menu-navigation ul ul,
.menu-navigation ul ul ul {
  padding: 0;
  margin: 0;
}

.menu-navigation ul ul {
  /*display: none;*/
}

.menu-navigation ul li a {
  font-size: 16px;
  text-decoration: none;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  
<div id="page-wrapper" ng-app="myApp" ng-controller="myCtrl">


		<div class="menu" >
          <div class="menu-navigation">
            <ul>
              <li class="menu-item" ><a ng-click="accMenuItem($event)" href="javascript:void(0)"><h2 class="inner-tc-subheading">heading</h2></a>
                <ul class="sub-menu-navigation">
                  <li class="sub-menu-item"><a ng-click="accSubMenuItem($event)" href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li>                 
                </ul>
              </li> 
             
              <li class="menu-item"><a ng-click="accMenuItem($event)" href="javascript:void(0)"><h2 class="inner-tc-subheading">heading</h2></a>
                <ul class="sub-menu-navigation">
                  <li class="sub-menu-item"><a ng-click="accSubMenuItem($event)" href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
            
          </div> 
        </div> 
	</div>

Первоначально функции jQuery были:

 $(".menu-item > a").click(function(e) {
   $(".menu-navigation ul ul").slideUp(),
   $(this).next().is(":visible") ||
   $(this).next().slideDown(),
   e.stopPropagation()
 });

 $(".sub-menu-item > a").click(function(e) {
   $(".sub-menu-navigation ul").slideUp(),
   $(this).next().is(":visible") ||
   $(this).next().slideDown(),
   e.stopPropagation()
 });

Answer 1

Попробуйте изменить события щелчка js следующим образом:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

 $scope.accMenuItem = function(e) {   
   var item = $(e.target);
    item.parent().next().slideUp();

     item.parent().next().is(":visible") ||
     item.parent().next().slideDown();


   e.stopPropagation();
 };

 $scope.accSubMenuItem = function(e) {
  var item = $(e.target);
    item.parent().next().slideUp();

     item.parent().next().is(":visible") ||
     item.parent().next().slideDown();  
   e.stopPropagation();
 };
});