当另一个元素在 angular 中获得 class 时，如何向元素添加 class？

Question

我有一个 scrollspy 指令，它向导航项添加“.active”class。当第一个导航项具有“.active”class 时，我希望我的 header 栏也包含某个 class。附件是一个简化的示例，但是如何通过仅查看项目 2 中的 class 将“.active”添加到项目 1 。 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>

Answer 1

Click here for live demo.

您需要一个指令来与元素交互。我会让指令监视元素的类并让它在类更改时从控制器调用函数。然后，您的控制器功能可以应用特定于您需要的逻辑，即设置一个标志让另一个元素知道如何响应。

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(' '));
      });
    }
  };
})
;

当另一个元素在 angular 中获得 class 时，如何向元素添加 class？

How to add a class to an element when another element gets a class in angular?

css

angularjs

class

conditional

ng-class