Conditional logic in ng-class in directives template
angularjs, angularjs-directive, conditional-statements, ng-class
Solution
You have to escape the apostrophes
'<i class="fa" ng-class=" { \'fa-angle-up\': !isCollapsed, \'fa-angle-down\': isCollapsed } "></i>'
Problem
I'm using AngularJS and i'm writing my own directive. I want to use conditional logic in my custom directive. The problem is caused in the `template` part. Here's a piece of my code: ``` angular.module('myDirectives').directive('widget', function() { return { replace: true, restrict: 'E', template: '<div class="widget">' + '<div class="panel panel-default">' + '<div class="panel-heading">' + '<a href="" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">' + '<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>' + '</a>' + '</div>' + '<div class="panel-body" collapse="isCollapsed">' + '<p>Panel Content</p>' + '</div>' + '</div>' + '</div>', transclude: true } }); ``` This line throws an error. ``` '<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>' ``` The `''` around `fa-angle-up` and `fa-angle-down` are causing this. There's probably a very simple workaround, but I haven't figured it out yet. So my question for you guys; Is there any other way to write this line?