Не удается получить CSS в приложении AngularJS для немедленного обновления

Question

Я надеюсь, что есть несколько экспертов Angular 1.x, которые могут показать мне, что я делаю неправильно.У меня есть простая функция, чтобы обновить, какая из 3 кнопок в «группе вкладок» является текущей.Эта функция вызывается всякий раз, когда нажимается какая-либо из кнопок.

        $scope.updateFilter = function (type, value) {
            // Additional unrelated code here ...

           document.getElementsByClassName('active')[0].className = document.getElementsByClassName('active')[0].className.replace(' active', '');
           document.getElementById('tabButton_' + value).className += ' active';
           $scope.$apply();
        };

Цвет фона текущей кнопки действительно выделен, но только после одного щелчка в другом месте экрана.Другими словами, он не обновляется мгновенно, как следует.

Есть идеи, как это исправить?

Answer 1

Трудно диагностировать проблему, не увидев больше кода или репродукции существующей проблемы.Однако, исходя из вышесказанного, вы, безусловно, не делаете «angularjs» способом.Более угловатый подход - использовать привязки и обновлять модель, когда пользователь нажимает различные варианты кнопок.Очень простой (и уродливый) пример:

angular.module('myApp', [])
  .controller('MainController', function () {
    var self = this;
    
    self.$onInit = function $onInit() {
      // These will be ng-repeated over for the example
      self.buttons = [
        'Option 1',
        'Option 2',
        'Option 3'
      ];

      // This is the model binding that will drive the active style
      self.activeIndex = 0;
    };
    
    self.setActiveIndex = function setActiveIndex(index) {
      // This is called on button click and updates the model used
      // for the active button styling
      self.activeIndex = index;
    };
  });

.active {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!-- repeat the buttons. when clicked, call controller method to update model's active index -->
<div ng-app="myApp" ng-controller="MainController as $ctrl">
  <button ng-repeat="b in $ctrl.buttons" type="button" ng-class="{active: $ctrl.activeIndex===$index}" ng-click="$ctrl.setActiveIndex($index)">{{::b}}</button>
</div>

Забери:

• Вероятно, вам не следует делать манипуляции с DOM.Используйте существующие директивы и привязку модели, иначе вы потеряете многие преимущества, которые вы должны получить от angularjs.
• Не вызывайте $ scope. $ Apply ().Angular сделает это за вас, если вы используете ng-click в своем шаблоне (что вам, вероятно, следует делать вместо того, чтобы создавать собственные прослушиватели событий).