{"action":"opened","issue":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/1863","labels_url":"https://api.github.com/repos/angular-ui/ui-router/issues/1863/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/ui-router/issues/1863/comments","events_url":"https://api.github.com/repos/angular-ui/ui-router/issues/1863/events","html_url":"https://github.com/angular-ui/ui-router/issues/1863","id":67113640,"number":1863,"title":"RFC: Add a ui-sref-resolve directive similar to ui-sref-active(-eq)","user":{"login":"lordnox","id":503189,"avatar_url":"https://avatars.githubusercontent.com/u/503189?v=3","gravatar_id":"","url":"https://api.github.com/users/lordnox","html_url":"https://github.com/lordnox","followers_url":"https://api.github.com/users/lordnox/followers","following_url":"https://api.github.com/users/lordnox/following{/other_user}","gists_url":"https://api.github.com/users/lordnox/gists{/gist_id}","starred_url":"https://api.github.com/users/lordnox/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lordnox/subscriptions","organizations_url":"https://api.github.com/users/lordnox/orgs","repos_url":"https://api.github.com/users/lordnox/repos","events_url":"https://api.github.com/users/lordnox/events{/privacy}","received_events_url":"https://api.github.com/users/lordnox/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-04-08T12:02:17Z","updated_at":"2015-04-08T12:02:17Z","closed_at":null,"body":"The purpose of this is a loading state icon on navigation elements while fetching all data through resolve.\r\n\r\nIf a user clicks a button in the navigation to change the state (to: `app.user.profile`) the app needs to fetch the profile data first (`resolve: { profile: function($http) { $http.get... } }`). During the latency of the network request I'd like to have the button pressed (`<a class=\"btn btn-primary\">`) to get an extra class (`\"btn-loading\"`) to show the user an indicator that the click was registered.\r\n\r\nThe way this currently has to be done:\r\n```html\r\n<nav>\r\n  <a class=\"btn btn-primary\" ng-class=\"{'btn-loading': changingState}\" ui-sref=\"app.user.profile\">Profile</a>\r\n</nav>\r\n```\r\n```javascript\r\nfunction Controller($scope, $state) {\r\n  $scope.changingState = false; // simplified here would need one for each button\r\n  $scope.go = function(state) {\r\n    $scope.changingState = true;\r\n    $state.go(state).then(function() { $scope.changeingState = false; })\r\n  }\r\n}\r\n```\r\n\r\nProposed change:\r\n```html\r\n<nav>\r\n  <a class=\"btn btn-primary\" ui-sref-resolve=\"btn-loading\" ui-sref=\"app.user.profile\">Profile</a>\r\n</nav>\r\n```\r\n"}}