{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular.js/issues/12813","labels_url":"https://api.github.com/repos/angular/angular.js/issues/12813/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular.js/issues/12813/comments","events_url":"https://api.github.com/repos/angular/angular.js/issues/12813/events","html_url":"https://github.com/angular/angular.js/issues/12813","id":105852411,"number":12813,"title":"Can't update DOM-node attr while using {{}} expression","user":{"login":"dhilt","id":4365660,"avatar_url":"https://avatars.githubusercontent.com/u/4365660?v=3","gravatar_id":"","url":"https://api.github.com/users/dhilt","html_url":"https://github.com/dhilt","followers_url":"https://api.github.com/users/dhilt/followers","following_url":"https://api.github.com/users/dhilt/following{/other_user}","gists_url":"https://api.github.com/users/dhilt/gists{/gist_id}","starred_url":"https://api.github.com/users/dhilt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dhilt/subscriptions","organizations_url":"https://api.github.com/users/dhilt/orgs","repos_url":"https://api.github.com/users/dhilt/repos","events_url":"https://api.github.com/users/dhilt/events{/privacy}","received_events_url":"https://api.github.com/users/dhilt/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:%20low","name":"frequency: low","color":"bfe5bf"},{"url":"https://api.github.com/repos/angular/angular.js/labels/severity:%20confusing","name":"severity: confusing","color":"cd19e7"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/angular/angular.js/milestones/35","html_url":"https://github.com/angular/angular.js/milestones/Purgatory","labels_url":"https://api.github.com/repos/angular/angular.js/milestones/35/labels","id":526241,"number":35,"title":"Purgatory","description":"This milestone is for issues and PRs that weren't accepted yet and we are waiting for more info from the submitter.\r\n\r\nFor issues this typically means that we weren't able to reproduce the issue or we haven't decided yet if a feature request is a good idea at all.\r\n\r\nFor PRs this means that the PR still needs a lot of work and we might not even be interested in merging it because it looks like a non-core feature. We are still waiting for more discussion within the team or more info from the contributor before making the final decision.","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":143,"closed_issues":509,"state":"open","created_at":"2014-01-04T01:20:50Z","updated_at":"2015-10-31T10:39:19Z","due_on":null,"closed_at":null},"comments":5,"created_at":"2015-09-10T16:58:32Z","updated_at":"2015-10-31T11:32:40Z","closed_at":null,"body":"There is a kind of race condition between dom-node attr internal recalculation when we are using {{}}-expression and dom-node attr external modifying. This topic is based on https://github.com/angular/angular.js/issues/12763 issue and also related to https://github.com/angular/angular.js/issues/9109 issue. Also I'd like to thank @gkalpak for he clarified a problem.\r\n\r\n----------\r\n\r\nHere is a little repro on this issue: http://jsfiddle.net/dhilt/8tceyw2w/9/\r\n\r\nI have an element with style-attr contains {{}}-expression:\r\n\r\n```\r\n<div id=\"myElement\" style=\"padding-left: 15px; color:{{toggle ? 'red' : 'black' }}\">\r\n```\r\n\r\nand I want to play with some style property which isn't presented in the markup:\r\n\r\n```\r\ndocument.getElementById('myElement').style.paddingTop = '20px'; \r\n```\r\n\r\nLet's run the [demo](http://jsfiddle.net/dhilt/8tceyw2w/9/)!\r\n\r\n **1.** Initial state. Before 1st digest ends.\r\n\r\nRun the demo. Get the alert before out from $watch.\r\nWe see that both of padding-left and padding-top properties are set to 15 and 20 px.\r\nAnd all of them are applied properly; we can see it despite the UI data is still unbound cause of alert-interruption.\r\n\r\n **2.** Initial state. The end of initial digest.\r\n\r\nClose the alert. Let the 1st digest cycle end.\r\nSee that padding-top is no longer applied to the element.\r\nSomething is broken and initial template's value of style-attr has a destructive priority over further updates on it.\r\n\r\n **3.** Recalculate style expression via $scope.toggle changing.\r\n\r\nClick on checkbox, start the new digest cycle.\r\nWe see that there is no problem with inline padding-left property.\r\nBut padding-top property is completely removed from element's style. Just an empty string.\r\nAnd `myElementStyle.paddingTop = '20px'` within $watch doesn't work.\r\n\r\n----------\r\n.\r\nThanks and good luck)"},"comment":{"url":"https://api.github.com/repos/angular/angular.js/issues/comments/152725948","html_url":"https://github.com/angular/angular.js/issues/12813#issuecomment-152725948","issue_url":"https://api.github.com/repos/angular/angular.js/issues/12813","id":152725948,"user":{"login":"artuska","id":1013856,"avatar_url":"https://avatars.githubusercontent.com/u/1013856?v=3","gravatar_id":"","url":"https://api.github.com/users/artuska","html_url":"https://github.com/artuska","followers_url":"https://api.github.com/users/artuska/followers","following_url":"https://api.github.com/users/artuska/following{/other_user}","gists_url":"https://api.github.com/users/artuska/gists{/gist_id}","starred_url":"https://api.github.com/users/artuska/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/artuska/subscriptions","organizations_url":"https://api.github.com/users/artuska/orgs","repos_url":"https://api.github.com/users/artuska/repos","events_url":"https://api.github.com/users/artuska/events{/privacy}","received_events_url":"https://api.github.com/users/artuska/received_events","type":"User","site_admin":false},"created_at":"2015-10-31T11:32:40Z","updated_at":"2015-10-31T11:32:40Z","body":"This issue is not fixed untill latest 1.4.7 version.\r\n\r\nI'm using Angular 1.4.7 (also tested in 1.4.5 and 1.4.6) — I have the same issues as described in this topic — if I have 2 or more `{{...}}` in `class` attribute then `ng-class` and `ng-show|hide` directives stop working.\r\n\r\n(In fact, they are not working only in first digest cycle — after the scope is updated second time (after some action which updates the scope, for example), everything works as expected :)\r\n\r\nSo, here `ng-class` does not work:\r\n`<div class=\"button button_{{name}} button_{{name}}_{{action}}\" ng-class=\"{'processable': isAllowed(action), 'active': madeAction(action), 'foo': 1, 'bar': true}\" ng-click=\"runButton(action)\">`\r\n\r\nAll functions return `true`, also `foo` and `bar` are true... but `ng-class` just not running and I do not see any `processable|active|foo|bar` classes in my `class` attribute.\r\n\r\n`ng-class` starts working in two ways:\r\n\r\n1) If I just remove some `{{...}}` from the class attribute:\r\n`<div class=\"button button_{{name}}\" ng-class=\"{'processable': isAllowed(action), 'active': madeAction(action), 'foo': 1, 'bar': true}\" ng-click=\"runButton(action)\">`\r\neverything magically starts working.\r\n\r\n2) Or, if I just update the scope (`ng-click` updates the scope) — both `ng-class` and `ng-show|hide` directives start workng as expected."}}