Как добавить класс к элементу, когда другой элемент получает класс в angular?

У меня есть директива scrollspy, которая добавляет класс «.active» к элементу навигации. Когда первый элемент навигации имеет класс «.active», я хочу, чтобы моя панель заголовка также содержала определенный класс. Прикреплен упрощенный пример, но как я могу добавить ".active" к элементу 1, просматривая только классы в элементе 2. jsfiddle

<div ng-app>
    <div ng-controller='ctrl'>
        <div id="item1" ng-class="if item2 has class=active then add active class here">Item 1</div>
        <div id="item2" ng-class="myVar">Item 2</div>
</div>

    //I can't use a scope object I can only look at item 2's classes
    <button type="button" ng-click="myVar='active'">Add Class</button>
    <button type="button" ng-click="myVar=''">Remove Class</button>

class css angularjs ng-class conditional
person silvster27    schedule 20.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нажмите здесь, чтобы посмотреть демонстрацию в реальном времени.

Вам понадобится директива для взаимодействия с элементом. Я бы хотел, чтобы директива следила за классами элемента и вызывала функцию из вашего контроллера при изменении классов. Затем ваша функция контроллера может применить логику, специфичную для вашей потребности, которая заключается в установке флага, позволяющего другому элементу знать, как реагировать.

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.foo = function(classes) {
    if (~classes.indexOf('active')) {
      $scope.otherItemIsActive = true;
    }
  };
})
.directive('onClassChange', function() {
  return {
    scope: {
      onClassChange: '='
    },
    link: function($scope, $element) {
      $scope.$watch(function() {
         return $element[0].className; 
      }, function(className) {
        $scope.onClassChange(className.split(' '));
      });
    }
  };
})
;
person m59    schedule 21.10.2015