Search Posts

ng-click not working while calling a function on a ‘ul’ in angularJS

I’m creating a navigation menu using angularJS.
My ng-click with the function “sayHello()” inside the ul or li are not working.

However, all the other ng-click are working fine.

ALso, if I just remove ‘obj.showChildMenu = !obj.showChildMenu’ from my first ng-click in the ul and just include ‘sayHello’ there, it is not working.
But the one which shows = ‘obj.showChildMenu = !obj.showChildMenu’ seems to work fine.

I’ve only attached the sample code here. The controller doesn’t have the JSON data as of now in this sample code.
Could you please help me fix this?

angular.module('myApp', [])
  .controller('navCtrl', ['$scope', function($scope){
    $scope.sayHello = function(){
      console.log('hello123');
    };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<nav ng-app="myApp" ng-controller="navCtrl" class="col-lg-7 col-md-7 col-xs-12 nav navMenu">
  <div class="nav-center">
	<div ng-cloak ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-model="parentNav" ng-mouseenter="showMenu(obj)" ng-mouseleave="hideMenu(obj)"> 
	  <div ng-class="{'hide-in-desktop': (obj.hideInDesktopNav), 'hide-in-mobile': (obj.hideInMobileNav), 'hide-in-tablet': (obj.hideInTabletNav)}">
		<a ng-href="{{obj.pagePath}}" ng-mouseover="setHover()" ng-mouseleave="removeHover()" ng-class="{'multiple': (obj.multiple), 'hover': (hovering)}" class="main-link nav-title">{{obj.pageTitle}}</a>
		<ul ng-if="obj.multiple" class="main-link mobile mobileMenu" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false" ng-click="obj.showChildMenu = !obj.showChildMenu; sayHello()">
		  <li>
		    <a ng-href="{{obj.pagePath}}">{{obj.pageTitle}}</a>
		    <i ng-class="{'downIcon fa-chevron-down': (!obj.showChildMenu), 'upIcon fa-chevron-up' :(obj.showChildMenu)}" class="fa" aria-hidden="true"></i>
		    <span class="selectionParentBar" ng-show="obj.showChildMenu===true"></span>
		  </li>
		</ul>
		<ul ng-if="obj.multiple" class="childMenu" ng-init="obj.showChildMenu===false;" ng-show="obj.showChildMenu">
		  <li ng-repeat="child in obj.secondLevelChildList | limitTo:5" ng-click="child.showSubChildMenu = !child.showSubChildMenu;">
		    <a ng-href="{{child.pagePath}}">{{child.pageTitle}}</a>
		    <span class="selectionBar" ng-if="child.showSubChildMenu===true"></span>
		    <i ng-if="child.multiple" ng-class="{'childIconDown fa-chevron-down': (!child.showSubChildMenu), 'childIconUp fa-chevron-up' :(child.showSubChildMenu)}" class="fa" aria-hidden="true"></i>
			<ul ng-if="child.multiple" ng-init="child.showSubChildMenu===false" ng-show="child.showSubChildMenu" class="subChildMenu">
			  <li ng-repeat="subChild in child.thirdLevelChildList | limitTo:5"><a ng-href="{{subChild.pagePath}}">{{subChild.pageTitle}}</a></li>
			  <li><a ng-href="{{child.pagePath}}">View All {{child.pageTitle}}</a></li>
			</ul>
		  </li>
		  <li class="viewMobile"><a ng-href="{{obj.pagePath}}">View All {{obj.pageTitle}}</a></li>
		</ul>
	  </div>
	</div>
  </div>
</nav>

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *