ngClick 上的 Angular 父子 ngHide

Question

所以我有一个进度条，点击它会展开全屏，里面有一些东西。我正在玩有角度的尝试，我似乎无法让关闭按钮切换功能正常工作。我有一个 ngClick 在父级上首先显示关闭按钮，它工作正常！但是当我点击关闭按钮时......没有任何反应......当你点击关闭按钮时，它应该隐藏关闭按钮......在我的控制器中，我将 showClose 变量设置为true......认为存在一些我不知道的范围界定问题

这是正在发生的事情的虚拟版本： http://codepen.io/anon/pen/GgMdRN?editors=101

<section ng-app="App">
  <div id="progress-container" ng-controller="ProgressCtrl">
      <div class="progress-bar" ng-click="showClose = false">
        <div class="close" ng-hide="showClose" ng-click="showClose = true" >Close</div>
      </div>
  </div>

</section>

Answer 1

您看到的是事件传播，它会导致子点击事件冒泡到其父容器。结果，您将看到所有父单击事件处理程序都被触发。

这应该可以解决您的问题。

脚本：

$scope.onClickClose = function(e){
  $scope.showClose = true;
  e.stopPropagation();
}

HTML：

<div class="progress-bar" ng-click="showClose = false">
        <div class="close" ng-hide="showClose" ng-click="onClickClose($event)" >Close</div>
      </div>