{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular.js/issues/5695","labels_url":"https://api.github.com/repos/angular/angular.js/issues/5695/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular.js/issues/5695/comments","events_url":"https://api.github.com/repos/angular/angular.js/issues/5695/events","html_url":"https://github.com/angular/angular.js/issues/5695","id":25287849,"number":5695,"title":"Directive with ng-class in template fails to merge its attribute with its caller's ng-class attribute.","user":{"login":"dariocravero","id":376268,"avatar_url":"https://avatars.githubusercontent.com/u/376268?v=3","gravatar_id":"","url":"https://api.github.com/users/dariocravero","html_url":"https://github.com/dariocravero","followers_url":"https://api.github.com/users/dariocravero/followers","following_url":"https://api.github.com/users/dariocravero/following{/other_user}","gists_url":"https://api.github.com/users/dariocravero/gists{/gist_id}","starred_url":"https://api.github.com/users/dariocravero/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dariocravero/subscriptions","organizations_url":"https://api.github.com/users/dariocravero/orgs","repos_url":"https://api.github.com/users/dariocravero/repos","events_url":"https://api.github.com/users/dariocravero/events{/privacy}","received_events_url":"https://api.github.com/users/dariocravero/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/angular.js/labels/component:%20$compile","name":"component: $compile","color":"e102d8"},{"url":"https://api.github.com/repos/angular/angular.js/labels/frequency:%20moderate","name":"frequency: moderate","color":"fef2c0"},{"url":"https://api.github.com/repos/angular/angular.js/labels/type:%20bug","name":"type: bug","color":"000000"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/angular/angular.js/milestones/27","html_url":"https://github.com/angular/angular.js/milestones/Backlog","labels_url":"https://api.github.com/repos/angular/angular.js/milestones/27/labels","id":489171,"number":27,"title":"Backlog","description":"Holds the backlog of issues and pull requests that have been triaged.\r\n\r\nBefore assigning items to this milestone they should be labelled, at the very least with the correct \"type\" label (i.e. \"issue\", \"pr\", \"bug\", \"regression\", \"chore\", \"docs\", etc).  Preferably you should also check for duplicate issues/PRs, note CLA status and assign \"complexity\" and \"impact\" labels too.","creator":{"login":"IgorMinar","id":216296,"avatar_url":"https://avatars.githubusercontent.com/u/216296?v=3","gravatar_id":"","url":"https://api.github.com/users/IgorMinar","html_url":"https://github.com/IgorMinar","followers_url":"https://api.github.com/users/IgorMinar/followers","following_url":"https://api.github.com/users/IgorMinar/following{/other_user}","gists_url":"https://api.github.com/users/IgorMinar/gists{/gist_id}","starred_url":"https://api.github.com/users/IgorMinar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IgorMinar/subscriptions","organizations_url":"https://api.github.com/users/IgorMinar/orgs","repos_url":"https://api.github.com/users/IgorMinar/repos","events_url":"https://api.github.com/users/IgorMinar/events{/privacy}","received_events_url":"https://api.github.com/users/IgorMinar/received_events","type":"User","site_admin":false},"open_issues":715,"closed_issues":939,"state":"open","created_at":"2013-11-18T23:30:35Z","updated_at":"2015-08-19T15:14:52Z","due_on":null,"closed_at":null},"comments":14,"created_at":"2014-01-09T02:39:24Z","updated_at":"2015-08-19T21:47:57Z","closed_at":null,"body":"Say I have the a directive called `myDirective` which has the following template:\r\n\r\n```\r\n<div class=\"my-directive\" ng-class=\"{'something': something}\" ng-transclude><div>\r\n```\r\n\r\nSay I want to add more conditions to `ng-class`:\r\n\r\n```\r\n<my-directive ng-class=\"{'else': else}\">my-directive</my-directive>\r\n```\r\n\r\nThe expected result would be:\r\n```\r\n<div class=\"my-directive\" ng-class=\"{'something': something, 'else': else}\"><div>\r\n```\r\nHowever, Angular is producing this:\r\n```\r\n<div class=\"my-directive\" ng-class=\"{'something': something} {'else': else}\"><div>\r\n```\r\n\r\nWhich of course causes an error since it isn't a valid expression.\r\n\r\nMy question is: should a directive that has an `ng-class` attribute merge it with whatever the caller send on its `ng-class` attribute?\r\n\r\nI asked on IRC and @caitp suggested it might be an issue on the way Expressions are resolved and that I should wrote this issue.\r\nThanks! :)"},"comment":{"url":"https://api.github.com/repos/angular/angular.js/issues/comments/132798673","html_url":"https://github.com/angular/angular.js/issues/5695#issuecomment-132798673","issue_url":"https://api.github.com/repos/angular/angular.js/issues/5695","id":132798673,"user":{"login":"btm1","id":4110944,"avatar_url":"https://avatars.githubusercontent.com/u/4110944?v=3","gravatar_id":"","url":"https://api.github.com/users/btm1","html_url":"https://github.com/btm1","followers_url":"https://api.github.com/users/btm1/followers","following_url":"https://api.github.com/users/btm1/following{/other_user}","gists_url":"https://api.github.com/users/btm1/gists{/gist_id}","starred_url":"https://api.github.com/users/btm1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/btm1/subscriptions","organizations_url":"https://api.github.com/users/btm1/orgs","repos_url":"https://api.github.com/users/btm1/repos","events_url":"https://api.github.com/users/btm1/events{/privacy}","received_events_url":"https://api.github.com/users/btm1/received_events","type":"User","site_admin":false},"created_at":"2015-08-19T21:47:57Z","updated_at":"2015-08-19T21:47:57Z","body":"@LeleDev you'll probably just need to make a custom directive for now that you use in a special case like this... that's what i did:\r\n\r\n```\r\n.directive('lClass', [function () {\r\n\treturn {\r\n\t\trestrict: 'A',\r\n\t\tlink: function (scope, elem, attrs) {\r\n\t\t\tif(!attrs.lClass) return;\r\n\r\n\t\t\tvar cls = scope.$eval(attrs.lClass);\r\n\r\n\t\t\tif(!angular.isObject(cls)) return;\r\n\r\n\t\t\tscope.$watch(function(){\r\n\t\t\t\tangular.forEach(cls,function(condition,cl){\r\n\t\t\t\t\tif(condition) {\r\n\t\t\t\t\t\telem.addClass(cl);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\telem.removeClass(cl);\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t}\r\n\t};\r\n}]);\r\n```"}}