当另一个元素在 angular 中获得 class 时,如何向元素添加 class?
How to add a class to an element when another element gets a class in angular?
我有一个 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>
您需要一个指令来与元素交互。我会让指令监视元素的 类 并让它在 类 更改时从控制器调用函数。然后,您的控制器功能可以应用特定于您需要的逻辑,即设置一个标志让另一个元素知道如何响应。
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(' '));
});
}
};
})
;
我有一个 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>
您需要一个指令来与元素交互。我会让指令监视元素的 类 并让它在 类 更改时从控制器调用函数。然后,您的控制器功能可以应用特定于您需要的逻辑,即设置一个标志让另一个元素知道如何响应。
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(' '));
});
}
};
})
;