Use scope attribute of directive as class name in ngClass

Question

I want to use a scope attribute of a directive as the class name in ngClass

someModule.directive("someDirective", function () {
    return {
        restrict: "A",
        scope: {
            styleClass: '@',
        },
        replace: true,
        template: "<li ng-class='{'{{styleClass}}:true'}' />"
    }
}

I've tried other syntax of ngClass as well but this doesn't work either (I added a $scope.dummy = true for this)

template: "<li ng-class=\"{true: '{{styleClass}}'}[dummy]\" />"

Is there a right way of doing this ??

Answer 1

If there's no condition in your ng-class expression, you can simply use class in your template:

template: "<li class='{{styleClass}}'/>"

Here's an example in plunkr : http://plnkr.co/edit/YrqMeAIbaekeH8PFlQIg?p=preview