何らかの理由で、 AngularJS、Foundation、およびAngular Foundationライブラリng-click
を使用するドロップダウン メニューでディレクティブが呼び出されません。リンクをクリックしても機能しませんが、現在は作業に関心があります。ng-click
以下のコードでは、リンクTOP-LEVELをクリックすると、ナビゲーション バーで機能します。ただし、ユーザー名をクリックしてドロップダウンが表示されると、表示される [ログアウト]リンクをクリックしても何も起こりません。コンソールなどに警告はありません。
アプリはルート HTML 要素に設定されています。
<html lang="en" data-ng-app="MyApplication">
コントローラーは body タグに設定されています。
<body data-ng-controller="MyRootController">
HTML
<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>
JavaScript
angular.module('MyApplication').controller('MyRootController', [
'$scope', 'LoginService',
function ($scope, LoginService) {
// ...
$scope.logoutOfSystem = function () {
var justReload = function () { window.location.reload(); };
LoginService.logout().then(justReload, justReload);
};
// ...
}
]);