css - 当另一个元素以 Angular 获取类时，如何向元素添加类？

Question

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

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

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