Question

如果我有一个具有ng-class属性且带有一些绑定的元素，并且我在该元素上调用addClass，这两个可以一起工作吗？

我的意思是该元素的class属性包含两个类（一个通过addClass调用添加，另一个通过ng-class添加）

例如：

这是元素：

<div class="ui-grid-cell-contents" 
     ng-class="[col.colIndex(), { 'position-relative': col.grouping && row.groupHeader }]"
     ng-bind="COL_FIELD CUSTOM_FILTERS"
     data-directive-that-calls-add-class>

这是调用addClass（其链接函数）的指令：

link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
     element.addClass("disable-safari-tooltip");

Answer 1

以下是一个示例，其中两个类将通过ng-class添加一个，而另一个通过directive添加。

ng-class使背景变为黄色，directive使文字变为绿色

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.yellow{
background-color: yellow
}
.red{
color: green
}
</style>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div red ng-class=" { 'yellow': yellow}" >Test</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.yellow = true;
})
app.directive('red', function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr, $timeout) {
        
            $element.addClass("red");
        }
    };
});

</script>

</body>
</html>

＆＃13;

但是，如果需要更改相同的css属性，那么最后添加的将更加优先，例如，检查类在2秒后通过指令更改

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.yellow{
background-color: yellow
}
.red{
color: green
}
.blue{
background-color: blue
}
</style>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div red ng-class=" { 'yellow': yellow}" >Test</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.yellow = true;
})
app.directive('red', function ($timeout) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {
        
            $element.addClass("red");
             $timeout(function () {
        $element.addClass("blue");
    }, 2000);
            
        }
    };
});

</script>

</body>
</html>

＆＃13;

Here is a demo URL

在具有ng-class的元素上调用addClass

1 个答案: