AngularJS，Foundation - 市中心导航 ng-click 不工作

Question

出于某种原因，我的 ng-click 指令未在使用 AngularJS、Foundation 和 Angular Foundation 库的下拉菜单上调用。单击 links 不起作用，但我目前更关心 ng-click 工作。

在下面的代码中，单击 link TOP-LEVEL 在导航栏上工作。但是，当您单击用户名并出现下拉菜单时，单击出现的 Logout link 不会执行任何操作。控制台或任何地方都没有警告。

应用设置在根 HTML 元素上：

<html lang="en" data-ng-app="MyApplication">

控制器设置在正文标签上：

<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>&nbsp;&nbsp;{{ 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);
    };
    // ...
  }
]);

Answer 1

变化：

  <li class="has-dropdown" data-ng-show="userLoggedIn">
    <a href="#"><i class="fa fa-user"></i>&nbsp;&nbsp;{{ 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>

至：

  <li has-dropdown data-ng-show="userLoggedIn">
    <a href="#"><i class="fa fa-user"></i>&nbsp;&nbsp;{{ 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>

您必须使用指令而不是手动设置 class。

至少这对我有用，我希望它对你有用！

纳夫勒斯

AngularJS，Foundation - 市中心导航 ng-click 不工作

AngularJS, Foundation - navigation downtown ng-click not working

angularjs

angularjs-ng-click

zurb-foundation-5

HTML

JavaScript