Calling an angularjs ui-router state from within a controller

Question

I use the angularjs ui-router to establish the various states within an app. While I know I can go to the state from a link in the html (via ui-sref), is it possible to go to the state from within a controller?

The code snippets below are a simple angularjs app to help illustrate my point.

In the example below, I have two states:

1. There is a state called home that is a simple form containing a text input field and a button that calls a search function in the controller.
2. There is a state called search that takes a query parameter called text. Its controller calls a service that performs a search based on the text. The results are displayed to the page.

First is the module's initiation.

var app = angular.module('example', [
    'ui.router'
  ]);

Below is the configuration of the ui-routing states as explained earlier.

app.config(
  function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider.
      state('home', {
        url: '/',
        template: '<input ng-model="text" type="text" placeholder="Query Text">' +
          '<button type="button" ng-click="search()">Search</button>',
        controller: 'SearchFormController'
      }).
      state('search', {
        url: '/search?text',
        template: '<pre>{{results | json}}</pre>',
        controller: 'SearchController'
      });
  });

The SearchFormController controls the form input of search. This controller just forwards the form input to the search state. Is it possible to reference the search state as opposed to constructing a URL and calling $location.path?

app.controller('SearchFormController', 
  function($scope, $location) {
    $scope.text = '';
    $scope.search = function() {
      // Can I use the 'search' state here instead of 
      // constructing a url and calling $location.path?
      $location.path('/search?text='+ encodeURIComponent($scope.text));
    };
  });

The controller of the search, SearchController, would look something like below. It would take the stateParams (i.e., query parameters) to issue an $http call.

app.controller('SearchController',
  function($scope, $stateParams, $http) {
    $scope.results = [];
    asUrl = function(resourceUrl, queryParams) {
      // do stuff and return http url
    };
    $http.get(asUrl("/someServiceUrl/search", $stateParams))
      .success(function(data, status) {
        $scope.results = data;
      })
      .error(function(data, status) {
        // display an error message
      });
  });

Again, in the SearchFormController, is it possible to reference the search state from the config by name? For example, in an html page I could have a link like this: <a ui-sref="search({text:Foo})">Search where text=Foo</a> where the search state is referenced by name and passes in the parameters. Can something similar be invoked from a controller (by name, passing in parameters)?

Answer 1

Yes, check the doc: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state for $state.go(stateName, params, options)

go(to, params, options)

Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).

There are many settings we can use, but that all is clearly defined in the doc linke above

Also could be interesting:

Difference between ui-sref and $state.go in AngularJS UI-Router