angularjs - 从 Controller 内调用 angularjs ui-router 状态

Question

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

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

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

1. 有一个状态叫做home这是一个简单的表单，包含一个文本输入字段和一个调用 Controller 中的搜索功能的按钮。
2. 有一个状态叫做search它采用名为文本的查询参数。它的 Controller 调用一个根据文本执行搜索的服务。结果显示在页面上。

首先是模块的启动。

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

下面是前面解释的 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'
      });
  });

SearchFormController控制搜索的表单输入。该 Controller 只是将表单输入转发到 search状态。 是否可以引用搜索状态，而不是构建 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));
    };
  });

搜索 Controller 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
      });
  });

同样，在SearchFormController中，是否可以通过名称从配置中引用搜索状态？例如，在 html 页面中我可以有一个像这样的链接:<a ui-sref="search({text:Foo})">Search where text=Foo</a>其中search state 通过名称引用并传入参数。可以从 Controller 调用类似的东西(通过名称、传入参数)吗？

Answer 1

是的，请检查文档:http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state对于 $state.go(stateName, params, options)

go(to、参数、选项)

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

我们可以使用很多设置，但所有设置都在上面的文档链接中明确定义

也可能很有趣:

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