I have developed a custom AngularJS directive that should work on elements with the specified class name .collapse.
However, when I apply this class using Angular's ng-class directive, the custom collapse directive does not get activated.
Here is a demonstration of the issue:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.welcome = "model";
$scope.isTrue = function() {
return true;
}
});
app.directive("directive", function($compile) {
return {
restrict: 'C',
scope: {
model: '@'
},
link: function(scope, elem, attrs) {
elem.css("background-color", "blue");
}
}
});.directive {
background-color: red;
color: white;
padding: 10px;
margin-bottom: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Simple Angular app</p>
<div class="directive">Make my background color blue using the directive</div>
<div ng-class="isTrue() ? 'directive' : ''">Make my background color blue using the directive</div>
</div>Is there a way to ensure that the directive also functions on classes added through ng-class?