CODEWITHSUNDEEP
javascripthtmlangularjs
Artvader
Artvader

Reputation: 958

How do I change a variable in a child element that has ng-click in the parent element.

Consider this code:

    <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>

I have an ng-click in the that element which changes the value of 'activeSection' to true. Inside of it, I have another button that can switch this back to it's initial value (false).

In the actual app, it would show or hide this child button based on a class added to the element,just to give you a little background what I'm trying to achieve.

When I click on the element, it does as I expect it to be: switch the value to 'true'. But when I click on the .back-button element with the other ng-click, it fails to register the changed value.

Why is that?

They're both inside the same controller, btw. If there's a solution that doesn't involve creating a new controller, it would be better.

Upvotes: 0

Views: 189

Answers (2)

Rodrigo Ferreira
Rodrigo Ferreira

Reputation: 1101

If you click on your back button, activeSection will be false but then your event will be propagated to its parent so the ng-click of Section will be executed too and activeSection will be true again.

In order to make your code work, you should stop the propagation of the ng-click event after changing the value of your variable in your back-button.

Your code would look like this:

<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>

Upvotes: 1

Shridhar Sharma
Shridhar Sharma

Reputation: 2385

What you are doing wrong is that you are putting the close button inside the element which have already ng-click, that's why when you are clicking the close button, it executes the parent ng-click and stop propagation for all other click events happening simultaneously.

So, the possible solution is making another super parent of the elements and taking the close button out of the element which is making it visible when clicked and adding a ng-show directive to the close button.

Checkout the following snippet

<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>

Upvotes: 1

Related Questions