For some reason my ng-click directive is not being called on dropdown menus using AngularJS, Foundation and the Angular Foundation library. Clicking on links does not work, but I am currently more concerned with ng-click working.
In the code below, clicking the link TOP-LEVEL works on the navigation bar. However, when you click the username and the dropdown appears, clicking the Logout link that appears does nothing. No warnings in the console or anything.
The app is set on the root HTML element:
<html lang="en" data-ng-app="MyApplication">
The controller is set on the body tag:
<body data-ng-controller="MyRootController">
<nav class="top-bar hide-for-small-only" role="navigation" data-options="sticky_on: large" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Application</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li data-ng-hide="userLoggedIn">
<a href="#" data-ng-click="openLoginPopup()"><i class="fa fa-lock"></i> Login</a>
</li>
<li>
<a href="#" data-ng-click="logoutOfSystem()">TOP-LEVEL</a>
</li>
<li class="has-dropdown" data-ng-show="userLoggedIn">
<a href="#"><i class="fa fa-user"></i> {{ user.Username }}</a>
<ul class="dropdown">
<li><a href="#"><i class="fa fa-pencil"></i> Some drop-down option...</a></li>
<li><a href="#" data-ng-click="logoutOfSystem()"><i class="fa fa-unlock"></i> Logout</a></li>
</ul>
</li>
</ul>
</section>
</nav>
angular.module('MyApplication').controller('MyRootController', [
'$scope', 'LoginService',
function ($scope, LoginService) {
// ...
$scope.logoutOfSystem = function () {
var justReload = function () { window.location.reload(); };
LoginService.logout().then(justReload, justReload);
};
// ...
}
]);
change:
<li class="has-dropdown" data-ng-show="userLoggedIn">
<a href="#"><i class="fa fa-user"></i> {{ user.Username }}</a>
<ul class="dropdown">
<li><a href="#"><i class="fa fa-pencil"></i> Some drop-down option...</a></li>
<li><a href="#" data-ng-click="logoutOfSystem()"><i class="fa fa-unlock"></i> Logout</a></li>
</ul>
</li>
to:
<li has-dropdown data-ng-show="userLoggedIn">
<a href="#"><i class="fa fa-user"></i> {{ user.Username }}</a>
<ul top-bar-dropdown>
<li><a href="#"><i class="fa fa-pencil"></i> Some drop-down option...</a></li>
<li><a href="#" data-ng-click="logoutOfSystem()"><i class="fa fa-unlock"></i> Logout</a></li>
</ul>
</li>
You have to use directives instead of manually setting the class.
Atleast this worked for me, i hope it works for you to!
Navles