Question

我有一个指令，我用它来渲染我的导航，但是它有两次ng-click，当点击时它们都会发射两次。我在这里已经阅读了类似的问题，但仍然无法解决。任何意见都会非常感激。

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。 Angular是手动初始化的。 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>

ng-click在指令控制导航中触发两次

1 个答案: