在具有ng类的元素上调用addClass

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

我的意思是该元素的这种意愿类属性包含两个类（通过addClass呼叫和另一添加一个从纳克级）

例如：

这里是元件：

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

来源

2017-09-06 jabko87

是它将包含两个类 – Sravan

简单地做：'NG-类= “{奇：奇，偶：偶}”' –

@Sravan如果纳克级的结合评估板该类应该被删除，它将只删除那个由ng-class添加的那个，所以addClass添加的那个仍然是 – jabko87

下面是一个例子，其中两个类将通过ng-class加1，另一个通过directive加1。

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

Here is a demo URL

来源

2017-09-06 11:55:57 Sravan

在具有ng类的元素上调用addClass

回答

相关问题