Encountering a peculiar issue with an AngularJs Directive involving nested ng-class. Take a look at this JSFiddle showcasing the problem in a hypothetical scenario: Here.
HTML
<div in-directive ng-class="{ 'testing1': 1 == 1 }"></div>
Javascript
var myApp = angular.module('myApp', []);
myApp.directive('inDirective', function () {
return {
restrict: 'A',
replace: true,
template: '<div ng-class="{ \'testing\': 1 == 1 }">Hi</div>'
};
});
AngularJS Error
Syntax Error: Token '{' is an unexpected token at column 25 of the expression [{ 'testing11': 1 == 1 } { 'testing': 1 == 1 }] starting at [{ 'testing': 1 == 1 }].
[{ 'testing11': 1 == 1 } { 'testing': 1 == 1 }]
This seems to be an invalid JSON format. Is there something incorrect in my approach? As of now, I have temporarily resolved it by shifting the ng-class to an upper div element, though this solution is not ideal.