Angular父子ng点击隐藏

Question

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

这是发生了什么的虚拟版本： 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>

Angular父子ng点击隐藏

Angular parent and child ngHide on ngClick

javascript

angularjs

angularjs-directive

angularjs-scope