从控制器内调用angularjs ui-router状态

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?

我使用angularjs ui-router来建立应用程序中的各种状态。虽然我知道我可以从html中的链接进入状态(通过ui-sref),是否可以从控制器内进入状态?

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

下面的代码片段是一个简单的angularjs应用程序,以帮助说明我的观点。

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.

有一个名为home的状态,它是一个简单的表单,包含一个文本输入字段和一个调用控制器中的搜索功能的按钮。

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.

有一个名为search的状态,它接受一个名为text的查询参数。其控制器调用基于文本执行搜索的服务。结果显示在页面上。

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.

下面是前面解释的ui路由状态的配置。

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?

SearchFormController控制搜索的表单输入。该控制器只是将表单输入转发到搜索状态。是否可以引用搜索状态而不是构造URL并调用$ 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.

搜索的控制器SearchController看起来如下所示。它需要stateParams(即查询参数)才能发出$ http调用。

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)?

同样,在SearchFormController中,是否可以通过名称从配置中引用搜索状态?例如,在html页面中我可以有这样的链接:搜索text = Foo ,其中搜索状态由名称引用,传递参数。是否可以从控制器调用类似的东西(通过名称,传入参数)?

1 个解决方案

#1

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

是的,请查看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).

转换到新状态的便捷方法。 $ state.go在内部调用$ state.transitionTo,但自动将选项设置为{location:true,inherit:true,relative:$ state。$ current,notify:true}。这允许您轻松使用绝对路径或相对路径,并仅指定您要更新的参数(同时让未指定的参数从当前活动的祖先状态继承)。

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

我们可以使用许多设置,但所有设置都在上面的doc linke中明确定义

Also could be interesting:

也可能很有趣:

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

AngularJS UI-Router中ui-sref和$ state.go之间的区别