NG 单击在指令控制导航中触发两次

Question

我有一个指令，我正在使用它来呈现我的导航，但其中有两个ng单击，它们在单击时都会触发两次。我在这里读过类似的问题，但仍然无法解决。任何意见将不胜感激。

html 元素

<nav ng-cloak ig-nav class="navbar navbar-default" role="navigation"></nav>

该 js

.controller('navCtrl',
  ['$scope', function($scope){
    console.log('navCtrl');
    $scope.usermenu = false;
    $scope.toggleMenu = function() {
      var nv = !$scope.usermenu;
      console.log(nv);
      $scope.usermenu = nv;
    };
 }])
.directive('igNav', function() {
  return {
    restrict: 'A',
    templateUrl: 'partials/nav.html',
    controller: 'navCtrl'
  };
})

和导航模板

<ul class="nav navbar-nav navbar-right">
  <li ng-if="auth.user"><a href="#/add" title="Add new asset"><!--i class="icon-plus"></i--><span class="glyphicon glyphicon-plus"></span> Add</a></li>
  <li ng-if="auth.user"><a href="#/share" data-toggle="modal" title="Share tags"><!--i class="icon-share"></i--><span class="glyphicon glyphicon-share"></span> Share</a></li>
  <li ng-if="auth.user" class="dropdown" ng-class="{open: usermenu}">
    <a href="#" ng-click="toggleMenu()" class="truncate">{{user.name}} <strong class="caret"></strong></a>
    <ul class="dropdown-menu">
      <li><a href="#/activity"><!--i class="icon-align-left"></i--><span class="glyphicon glyphicon-align-left"></span> Activity</a></li>
      <li><a href="#/shares"><!--i class="icon-truck"></i--><span class="glyphicon glyphicon-paperclip"></span> Shares</a></li>
      <li class="divider">&nbsp;</li>
      <li><a href="#/account"><!--i class="icon-cog"></i--><span class="glyphicon glyphicon-cog"></span> My Profile</a></li>
      <li><a href="#" ng-click="logout()" title="Logout - {{user.name}}"><!--i class="icon-signout"></i--><span class="glyphicon glyphicon-minus-sign"></span> Logout</a></li>
    </ul>
  </li>
  <li ng-if="!auth.user"><a href="#/login"><!--i class="icon-signin"></i--><span class="glyphicon glyphicon-user"></span> Login</a></li>
</ul>

由于它在Charliefl的plnkr中起作用，因此它被解雇两次一定还有其他原因。这里有一些我认为无关紧要的信息，但也许它毕竟是。

该应用程序正在运行Firebase和angularfire 0.5。$route已被包括在内。角度是手动初始化的。ignav 包含在基本级别控制器中（应用于 HTML 标记）

Answer 1

尽管在我的应用程序中使用小提琴工作，但它仍然发射了两次。经过一些重组后，简单的修复程序是将ng-click从<a>移动到其父<li>

<li ng-if="auth.user" ng-click="toggleMenu()" class="dropdown" ng-class="{open: usermenu}">
  <a href="#" class="truncate">{{user.name}} <strong class="caret"></strong></a>
  <ul class="dropdown-menu">
    <li><a href="#/activity"><!--i class="icon-align-left"></i--><span class="glyphicon glyphicon-align-left"></span> Activity</a></li>
    <li><a href="#/shares"><!--i class="icon-truck"></i--><span class="glyphicon glyphicon-paperclip"></span> Shares</a></li>
    <li class="divider">&nbsp;</li>
    <li><a href="#/account"><!--i class="icon-cog"></i--><span class="glyphicon glyphicon-cog"></span> My Profile</a></li>
    <li><a href="#" ng-click="logout()" title="Logout - {{user.name}}"><!--i class="icon-signout"></i--><span class="glyphicon glyphicon-minus-sign"></span> Logout</a></li>
  </ul>
</li>