从控制器中调用angularjs UI路由器状态 [英] Calling an angularjs ui-router state from within a controller

问题描述

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

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应用程序，可帮助说明我的观点.

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

在下面的示例中，我有两种状态:

In the example below, I have two states:

1. 有一个名为home的状态，它是一种简单形式，包含一个文本输入字段和一个在控制器中调用搜索功能的按钮.
2. 存在一个名为search的状态，该状态带有一个名为 text 的查询参数.它的控制器调用一个服务，该服务基于文本执行搜索.结果显示在页面上.

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.

首先是模块的启动.

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

下面是ui路由状态的配置，如前所述.

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'
      });
  });

SearchFormController 控制搜索的表单输入.该控制器只是将表单输入转发到search状态. 是否可以引用 search 状态，而不是构造URL并调用 $ location.path ?

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));
    };
  });

搜索的控制器 SearchController 如下所示.需要stateParams(即查询参数)发出 $ http 调用.

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
      });
  });

同样，是否可以在 SearchFormController 中通过名称引用配置中的 search 状态?例如，在html页面中，我可以有这样的链接:<a ui-sref="search({text:Foo})">Search where text=Foo</a>，其中search状态通过名称引用并传递参数.可以从控制器调用类似的东西(按名称，传入参数)吗?

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

推荐答案

是，请检查文档:

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

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

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

也可能很有趣:

AngularJS UI路由器中ui-sref和$ state.go之间的差异

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

这篇关于从控制器中调用angularjs UI路由器状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！