AngularJS / ui-router: $state.go does not work inside ng-click

Question

I have a view where I have the following code:

T

Answer 1

According to https://github.com/angular-ui/ui-router/wiki/Quick-Reference#note-about-using-state-within-a-template you can add it to $rootScope, so it will be available in all the scopes and hence all the templates, by

angular.module("myApp").run(function ($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
});

Answer 2

Simplest Solution is to use $Window Service and old Approach

1. Inject $window service of angular JS.
2. Use history.back() function of javascript.
3. Done,It is simplest solution if you just want to go back.

I will not write whole angular JS. Only code that matters:

HTML-Code

<button ng-click="$ctrl.goBack()">Go Back</button>

JS-Code

self.goBack = function(){ $window.history.back(); };

Answer 3

If you are using ui-router there is an attribute called ui-sref that can be used as follows:

<a ui-sref="blog.new-post"></a>

I recommend using that and styling the link as a button (can easily be done if you're using a CSS library like Twitter Bootstrap). Then you don't need to mess around with any JavaScript when writing your links.

If you need to pass a parameter into the state, you can do the following:

<a ui-sref="blog.edit-post({id: item.id})"></a>

where $scope.item is an object with an ID property you want to be passed as a URL parameter.