Вызовите addClass для элемента с ng-классом

Если у меня есть элемент с атрибутом ng-class с некоторой привязкой, и я вызываю addClass для этого элемента, будут ли эти два элемента работать вместе?

Я имею в виду, что атрибут класса этого элемента будет содержать оба класса (один добавлен через вызов addClass, а другой из ng-класса)

Например:

Вот элемент:

<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");

angularjs
person michal.jakubeczy    schedule 06.09.2017    source источник
comment
да, он будет содержать оба класса   -  person Sravan    schedule 06.09.2017
comment
просто сделай: ng-Clas="{ odd: odd, even: even }"   -  person Ramesh Rajendran    schedule 06.09.2017
comment
@Sravan, и если привязка ng-class оценивает, что класс должен быть удален, он удалит только тот, который был добавлен справа от ng-class, поэтому тот, который был добавлен addClass, останется   -  person michal.jakubeczy    schedule 06.09.2017
comment
angularjs не имеет директивы addClass, откуда эта функция?   -  person madalinivascu    schedule 06.09.2017
comment
@jabko87, не могли бы вы уточнить и добавить немного кода   -  person Sravan    schedule 06.09.2017
comment
Вместо вызова addClass() сохраните выражение в ng-class и назовите свой класс соответствующим образом. Пример: ng-class={selectedHeader: key == selectedCol}   -  person    schedule 06.09.2017
comment
@Sravan: добавлен код   -  person michal.jakubeczy    schedule 06.09.2017
comment
@anu: да, это, очевидно, лучше всего, но мне нужно интегрировать некоторые другие директивы, которые выполняют этот вызов, и нет времени на рефакторинг.   -  person michal.jakubeczy    schedule 06.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вот пример, когда оба класса будут добавлены один через ng-class, а другой через directive.

ng-class делает фон желтым, а directive делает текст зеленым.

<!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>

Но если нужно изменить одно и то же свойство css, последнее добавленное будет иметь более высокий приоритет, например, проверьте изменение класса через 2 секунды с помощью директивы

<!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>

Вот демонстрационный URL

person Sravan    schedule 06.09.2017