AngularJS ng-class updating content

Question

I've got some code in AngularJS here working half percent (I will explain) :

<button ng-class="{'svgMinus-dark': isDarkTheme, 'svgMinus': !isDarkTheme}"></button>

I also tried another writing to say the same :

<button ng-class="{'svgMinus-dark': true-condition, 'svgMinus': !isDarkTheme}" href=""></button>

And I got exactly the same result (and problem). My problem is, when I do set isDarkTheme to true (working), the class doesn't edit instantly. I have to click on my button. And I don't know why, when the $scope edits itself, the class doesn't toggle instantly.

Why do I have to click to see the class of my true-condition (or false condition) update ?... Is there a way to force my ng-class update when my $scope.isDarkTheme toggle to true or false ?

thanks a lot in advance, I'm getting less and less hair haha

This might be a case of $scope not being what you think it is. Is the button inside of ng-if? — Kinglish
– Kinglish, Commented Apr 5, 2022 at 23:18

Kinglish · Accepted Answer · 2022-04-05 23:24:37Z

0

Here is a working example. It might not help you, but you can use it (copy it) to edit your question and create a snippet to demonstrate your code.

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.isDarkTheme = false;
    $scope.toggleDarkMode = function() {
      $scope.isDarkTheme = !$scope.isDarkTheme
    };

    $timeout($scope.toggleDarkMode, 2000)
  }]);

div {
  padding: 20px;
  height: 100%;
}

.is-dark {
  background: #111;
}

.is-dark h1 {
  color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-class="{'is-dark': isDarkTheme}">
  <h1>Toggle in 2 seconds</h1>
  <button ng-click="toggleDarkMode()">Toggle dark mode</button>
</div>

answered Apr 5, 2022 at 23:24

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ng-class updating content

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