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>

Angular parent and child ng Hide on ng Click

1 个答案: