如何更改父元素中具有 ng-click 的子元素中的变量

Question

请考虑以下代码：

    <section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
    <div class="page-content sub-content active-section">{{activeSection}}
        <div class="page-border">
            <a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
                <div class="back-button" ng-click="activeSection=false">CLOSE</div>
            </a>
        </div>
    </div>
    </section>

我在那个元素中有一个 ng 单击，它将"活动部分"的值更改为 true。在它里面，我有另一个按钮可以将其切换回它的初始值(false(。

在实际的应用程序中，它会根据添加到元素中的类显示或隐藏此子按钮，只是为了给您一些我想要实现的背景。

当我单击该元素时，它会按照我的预期执行：将值切换为"true"。但是当我用另一个 ng 单击单击后退按钮元素时，它无法注册更改的值。

为什么？

顺便说一句，它们都在同一个控制器内。如果有一个不涉及创建新控制器的解决方案，那就更好了。

Answer 1

如果您单击后退按钮，activeSection将为假，但随后您的事件将传播到其父级，因此Section的ng-click也将执行，activeSection将再次为真。

为了使您的代码正常工作，您应该在更改back-button中的变量值后停止 ng-click 事件的传播。

您的代码如下所示：

<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
      <div class="page-border">
          <a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
              <div class="back-button" ng-click="activeSection=false; $event.stopPropagation();">CLOSE</div>
          </a>
        </div>
    </div>
    </section>

Answer 2

你做错的是你把关闭按钮放在已经ng-click的元素中，这就是为什么当你点击关闭按钮时，它会执行父ng-click并停止传播同时发生的所有其他点击事件。

因此，可能的解决方案是创建元素的另一个超级父级，并从元素中取出关闭按钮，使其在单击时可见，并向关闭按钮添加ng-show指令。

查看以下代码片段

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <section class="page-section about-us" scroll-bookmark="about-us" ng-init="activeSection=false">
    <div ng-click="activeSection=true" class="page-content sub-content active-section">{{activeSection}}
      <div class="page-border">
        <a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
        </a>
      </div>
    </div>
    <div ng-show="activeSection" class="back-button" ng-click="activeSection=false">CLOSE</div>
  </section>
</div>