How do I change the css class of an element inside a directive?
I want to change the color of the icon relative to the button clicked by the user (let's say there is a popover that has three buttons: high, medium, low. If the user clicks "high" it should be changed to red, medium - orange .. low - blue. I made a directive for a popover with three buttons.but I cannot update the css classes regarding the button click.
HTML:
<span class="tk-action-s">
<i priority-over class="fa fa-star {{colorChanger}}" ng-class="colorChanger"></i>
</span>
:
myApplication.directive('priorityOver', function ($compile) {
var itemsTemplate = "<div class=\"btn-group\"></div><div class=\"btn-group\"><label class=\"btn btn-danger\" ng-model=\"priority\" btn-radio=\"'high'\" ng-click=\"changeColor()\" uncheckable>High</label><label class=\"btn btn-warning\" ng-model=\"priority\" btn-radio=\"'medium'\" uncheckable>Medium</label><label class=\"btn btn-primary\" ng-model=\"priority\" btn-radio=\"'low'\" uncheckable>Low</label></div>";
var getTemplate = function () {
var template = '';
template = itemsTemplate;
return template;
}
return {
restrict: "AC",
transclude: true,
template: "<span ng-transclude></span>",
controller: function($scope, $element, $attrs) {
$scope.colorChanger = 'col';
},
link: function (scope, element, attrs) {
scope.colorChanger = 'col' ;
var popOverContent;
var html = getTemplate();
popOverContent = $compile(html)(scope);
var options = {
content: popOverContent,
placement: "bottom",
html: true,
//title: scope.title
};
$(element).popover(options);
$('body').on('click', function (e) {
$(element).each(function () {
// hide any open popovers when the anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
}
};
});
source to share
As nikos said in a comment, it looks pretty tricky. You seem to be mixing scopes, directives and templates. Maybe you should take a look at the documentation.
In any case, this is currently an alternative to your solution.
HTML:
<div ng-app="example">
<span class="tk-action-s">
<button priority-over class="fa fa-star col"></button>
</span>
<script type="text/ng-template" id="priorityPopover">
<div class="btn-group">
<label class="btn btn-danger" btn-radio="'high'" ng-click="changePriority('high')" uncheckable>High</label>
<label class="btn btn-warning" btn-radio="'medium'" ng-click="changePriority('medium')" uncheckable>Medium</label>
<label class="btn btn-primary" btn-radio="'low'" ng-click="changePriority('low')" uncheckable>Low</label>
</div>
</script>
directive:
angular.module('example', []).directive('priorityOver', function ($compile, $templateCache) {
return {
restrict: "AC",
link: function (scope, element, attrs) {
scope.changePriority = function (priority) {
$(element).removeClass("low medium high");
$(element).addClass(priority);
};
$(element).popover({
content: $compile($templateCache.get('priorityPopover').trim())(scope),
placement: "bottom",
html: true,
trigger: 'focus'
});
}
};
});
Notice how the template is extra from the directive and loaded using the $ templateCache service. Also, no more toggling occurs, and we show the behavior of adding and removing style from a button through the area. Allows us to access the element that the directive applies to. Also useful when you want to do unit testing, for example.
source to share