javascript - ngClick 上的 Angular 父级和子级 ngHide

Question

所以我有一个进度条，单击时将展开全屏，其中包含一些内容。我正在尝试 Angular 东西，但我似乎无法使关闭按钮切换功能正常工作。我在父级上有一个 ngClick，首先显示关闭按钮，效果很好!但是当我点击关闭按钮时...什么也没有发生...当您单击关闭按钮时它应该隐藏关闭按钮...在我的 Controller 中我将 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>