angularjs - 为什么 ng-click 处理程序被触发两次？

Question

我有一个用于删除问题的按钮:

<a class="btn-small float-right" data-ng-click="deleteQuestion(question)">
  <i data-ng-class="{true: 'icon-step-backward', false: 'icon-remove'}
  [question.IsDeleted]"></i>
</a>

这是按钮背后的代码:

$scope.deleteQuestion = function (data) {
  if (data.IsDeleted) {
      data.IsDeleted = false;
      for (var i = 0; i < deletedQuestions.length; i++) {
          if (deletedQuestions[i] == data) {
              deletedQuestions.splice(i, 1);
          }
      }  
  } else {
      data.IsDeleted = true;
      if ($.inArray(data, deletedQuestions) === -1) {
          deletedQuestions.push(data);
      }
  }
};

现在，当我按下按钮时，我注意到该函数已被触发两次。第一次删除问题，第二次撤消该操作。

我想要的是一个按钮来删除问题，当您再次单击它时，它会撤消该操作。

我只是想知道我忽略了什么......

编辑这是一个 fiddle : http://jsfiddle.net/rquackenbush/AbWKs/

Answer 1

我发现了问题所在。

链接位于列表内:

<li class="question-item"
   data-app-bind-html="question.template">                        
       <a class="btn-small float-right" data-ng-click="deleteQuestion(question)">
         <i data-ng-class="{true: 'icon-step-backward', false: 'icon-remove'} [question.IsDeleted]">
         </i>
      </a>
<li>

我制作了一个 data-app-bind-html ，它在其中绑定(bind)了 html 部分。这导致链接被绑定(bind)两次，从而也使其触发两次。为了解决这个问题，我只是确保指令绑定(bind) html 部分而不是整个列表项。