如何使用$ state.go toParams和$ stateParams发送和检索参数？

Question

我使用AngularJS v1.2.0-rc.2和ui-router v0.2.0.我想引荐的状态转移到另一种状态,所以我使用toParams的$state.go,像这样:

$state.go('toState', {referer: $state.current.name});

根据文档,这应该填充$stateParams在toState控制器上,但它是undefined.我错过了什么？

我创建了一个插件来演示:

http://plnkr.co/edit/ywEcG1

Answer 1

如果要传递非URL状态,则url在设置时不得使用state.我在公关上找到了答案并做了一些修改以便更好地理解.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

然后您可以像这样导航到它:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

要么:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

因此在HTML中:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

这个用例在文档中完全被发现,但我认为它是在不使用URL的情况下转换状态的有力手段.

Answer 2

Nathan Matthews的解决方案对我没有用,但它完全正确但是没有必要达成一个解决方法:

关键点是:$ state.go的已定义参数和toParamas的类型应该是状态转换两侧的相同数组或对象.

例如,当你在状态中定义一个params时,你的意思是params是数组,因为使用了"[]":

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      ['index', 'anotherKey'],
    controller:  'overviewController'
})

所以你也应该像这样传递给Params作为数组:

params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)

您可以通过$ stateParams访问它们,如下所示:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams[0];
    var anotherKey = $stateParams[1];
});

更好的解决方案是在两侧使用对象而不是数组:

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      {'index': null, 'anotherKey': null},
    controller:  'overviewController'
})

我在params定义中将{]替换为{}.为了传递给Params到$ state.go你也应该使用object而不是array:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

然后你可以通过$ stateParams轻松访问它们:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

Answer 3

我所要做的就是像这样在url状态定义中添加一个参数

url: '/toState?referer'

卫生署!

Answer 4

不确定它是否适用于带有ui-router v0.2.0的AngularJS v1.2.0-rc.2.我已经使用ui-router v0.2.13在AngularJS v1.3.14上测试了这个解决方案.

我只是意识到没有必要像gwhn推荐的那样在URL中传递参数.

只需在状态定义中使用默认值添加参数即可.您的州仍可以拥有Url值.

$stateProvider.state('state1', {
    url : '/url',
    templateUrl : "new.html",
    controller : 'TestController',
    params: {new_param: null}
});

并添加参数 $state.go()

$state.go('state1',{new_param: "Going places!"});

Answer 5

这个页面上的这些例子都不适合我.这是我使用的,它运作良好.有些解决方案说你不能将url与$ state.go()结合起来,但事实并非如此.尴尬的是你必须为url定义params并列出params.两者都必须存在.在Angular 1.4.8和UI路由器0.2.15上测试.

在州内将你的参数添加到州的末尾并定义参数:

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

在你的控制器中,你的go语句将如下所示:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

然后将params拉出并在新状态的控制器中使用它们(不要忘记将$ stateParams传递给控制器​​函数):

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!

Answer 6

在我的情况下,我尝试了这里给出的所有选项,但没有人正常工作(角1.3.13,离子1.0.0,angular-ui-router 0.2.13).解决方案是:

.state('tab.friends', {
      url: '/friends/:param1/:param2',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })

在州.go:

$state.go('tab.friends', {param1 : val1, param2 : val2});

干杯

Answer 7

我花了很多时间与Ionic/Angular的$ state和$ stateParams战斗;

要使用$ state.go()和$ stateParams,您必须设置某些内容,并且不得出现其他参数.

在我的app.config()中,我包含了$ stateProvider,并在其中定义了几种状态:

$stateProvider
    .state('home', {
        templateUrl: 'home',
        controller:  'homeController'
    })
    .state('view', {
        templateUrl: 'overview',
        params:      ['index', 'anotherKey'],
        controller:  'overviewController'
    })

该params键就显得尤为重要.同样,请注意,没有url密钥存在...利用stateParams和URL不混合.它们彼此互相排斥.

在$ state.go()调用中,将其定义为:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

在index和anotherKey,如果他们在$ stateController第一家上市$ stateParams变量将只填充params定义键.

在控制器中,包括$ stateParams,如图所示:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

传递的变量应该可用!

Answer 8

试试reload: true？

无法弄清楚最长时间发生了什么 - 事实证明我在欺骗自己.如果您确定事情写得正确并且您将使用相同的状态,请尝试reload: true:

.state('status.item', {
    url: '/:id',
    views: {...}
}

$state.go('status.item', { id: $scope.id }, { reload: true });

希望这能节省您的时间!

Answer 9

我也遇到过类似的问题。经过大量的谷歌搜索、试验和测试，我最终得到了一个可行的解决方案。这是我的解决方案，对您有用。

我有两个控制器 - searchBoxController和stateResultController以及一个名为searchQuery的参数，该参数将从具有搜索框的视图传递到显示从远程服务器获取的结果的视图。这是你如何做到的：

下面是您从中调用下一个视图的控制器 $state.go()

.controller('searchBoxController', function ($scope, $state) {
        $scope.doSearch = function(){
            var searchInputRaw = $scope.searchQueryInput;
            $state.go('app.searchResults', { searchQuery: searchInput });
        }
    })

以下是$state.go()执行时将调用的状态：

.state('app.searchResults', 
            {
                url: '/searchResults',
                views:
                {
                    'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
                },
                params: 
                {
                    'searchQuery': ''
                }
            })

最后，与app.searchResults状态关联的控制器：

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
        $scope.searchQueryInput = $stateParams.searchQuery;
    });