How to pass variables between html in angularjs?

Question

I'm trying to use $rootScope to pass a boolean between two files and works perfectly... ONCE. Then, it does not change even tho the CLICKED log appears.

What the hell??

navbar.html

ng-click="openRightSideMenu(); // Works well

navbar.js

$scope.openRightSideMenu = () => {
     console.log("CLICKED") // this always logs, so ng-click is working well
     $rootScope.rightSideMenuOpen = true; // Opens the sideMenu but ONLY WORKS ONCE!! It's not change to true the second time
}

sideMenu.html

ng-class="rightSideMenuOpen ? 'open' : 'closed'" // Toogle between open
            // and closed, works well but I cannot open the second time

ng-click="rightSideMenuOpen = false" // Close works well

Any idea why $rootScope.rightSideMenuOpen only works once and doesn't change the second time??

georgeawg · Accepted Answer · 2020-03-26 12:50:16Z

1

You have a data hiding problem.

The ng-click is setting the rightSideMenuOpen property of the local $scope of the element. This hides the value of that property on $rootScope.

ng-class="rightSideMenuOpen ? 'open' : 'closed'" // Toogle between open
            // and closed, works well but I cannot open the second time

̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶r̶i̶g̶h̶t̶S̶i̶d̶e̶M̶e̶n̶u̶O̶p̶e̶n̶ ̶=̶ ̶f̶a̶l̶s̶e̶"̶
ng-click="$root.rightSideMenuOpen = false"

This way the ng-click changes the property on $rootScope.

answered Mar 26, 2020 at 12:50

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass variables between html in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related