当另一个元素以角度形式获取类时，如何向元素添加类？

Question

我有一个scrollspy指令，可以为导航项添加“.active”类。当第一个导航项具有“.active”类时，我希望我的标题栏也包含某个类。附件是一个简化示例，但如何通过仅查看第2项中的类，将“.active”添加到第1项。 jsfiddle

npm-repo

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