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

我正在将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

如果要传递非URL状态，则url在设置时一定不要使用state。我在PR上找到了答案，并四处游逛以更好地理解。

$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的情况下进行状态转换的强大方法。

内森·马修斯（Nathan Matthews）的解决方案对我不起作用，但这是完全正确的，但没有解决的办法：

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

例如，当您按如下所示在状态中定义参数时，则表示参数是数组，因为使用了[[]]：

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

因此，您也应该像这样将toParams作为数组传递：

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

我在参数定义中将{]替换为{}。为了将toParams传递给$ 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;
});

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

url: '/toState?referer'

h！

不知道它是否可以与带有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!"});

此页面上的这些示例都不适合我。这是我使用过的，效果很好。一些解决方案说您不能将url与$ state.go（）结合使用，但这是不正确的。尴尬的是，您必须为url定义参数，并列出这些参数。两者都必须存在。在Angular 1.4.8和UI Router 0.2.15上进行了测试。

在状态中，将参数添加到状态结尾并定义参数：

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

在您的控制器中， go语句将如下所示：

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

然后将参数拉出并在新状态的控制器中使用它们（不要忘记将$ stateParams传递给控制器​​函数）：

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

就我而言，我尝试了此处给出的所有选项，但是没有人能正常工作（角度1.3.13，离子1.0.0，UI角度路由器0.2.13）。解决方案是：

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

并在state.go中：

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

干杯

我花了很多时间与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;
});

传递的变量应该可用！

尝试一下reload: true？

无法找出最长的时间-事实证明我在自欺欺人。如果确定一切编写正确，并且将使用相同的状态，请尝试reload: true：

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

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

希望这可以节省您的时间！

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

我有两个控制器-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()执行get 时将被调用的状态：

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

在我的父母/子女状态下。在子状态下声明的所有参数必须由父状态知道

        .state('full', {
            url: '/full',
            templateUrl: 'js/content/templates/FullReadView.html',
            params: { opmlFeed:null, source:null },
            controller: 'FullReadCtrl'
        })
        .state('full.readFeed', {
            url: '/readFeed',
            views: {
                'full': {
                    templateUrl: 'js/content/templates/ReadFeedView.html',
                    params: { opmlFeed:null, source:null },
                    controller: 'ReadFeedCtrl'
                }
            }
        })

我们进入具有两个参数的状态的解决方案正在更改：

.state('somestate', {
  url: '/somestate',
  views: {...}
}

至

.state('somestate', {
  url: '/somestate?id=:&sub=:',
  views: {...}
}

您在router.js中定义以下内容

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

您的控制器需要添加$ stateParams。

function UserCtrl($stateParams) {
    console.log($stateParams);
}

您可以通过参数发送对象，如下所示。

$state.go('users', {obj:yourObj});

我试图从第1页导航到第2页，并且还必须传递一些数据。

在我的router.js中，我添加了params 名称和age：

.state('page2', {
          url: '/vehicle/:source',
          params: {name: null, age: null},
.................

在Page1中，单击下一步按钮：

$state.go("page2", {name: 'Ron', age: '20'});

在Page2中，我可以访问这些参数：

$stateParams.name
$stateParams.age

如果这是您要像这样传递的查询参数： /toState?referer=current_user

那么您需要像这样描述您的状态：

$stateProvider.state('toState', {
  url:'toState?referer',
  views:{'...'}
});

来源：https : //github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters