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>

我在该元素中点击了一下，它改变了＆＃39; activeSection＆＃39;的值。为真。在其中，我有另一个按钮，可以将其切换回它的初始值（false）。

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

当我点击该元素时，它会像我预期的那样：将值切换为＆＃39; true＆＃39;。但是当我单击其他ng-click的.back-button元素时，它无法注册更改的值。

为什么？

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

Answer 1

你做错了是你把关闭按钮放在已经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>

Answer 2

如果您点击后退按钮，activeSection将 false ，但您的活动将传播到其父级，以便ng-click Section的执行也将被执行，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>

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

2 个答案: