如何在另一個元素獲得角度類時向某個元素添加類？

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.

你需要一個指令與要素互動。我會讓該指令監視元素的類，並在類更改時讓它從控制器調用一個函數。然後，您的控制器功能可以應用您的需求的特定邏輯，即設置一個標誌讓其他元素知道如何響應。

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