javascript - 如何以 Angular 将参数从先前状态传递到新状态？

Question

我的仪表板中有 10 个类似的框，每个框都显示特定设备的不同值。当用户单击每个时，我必须将他们定向到新页面，其中显示有关该设备的更多信息。

所有设备的第二页布局都是相同的。我只需要更新 $scope。

什么是实现此目的的干净 Angular 方法，最好不要向网址添加查询？

我正在使用 $stateProvider 并尝试使其与 onEnter() 一起使用，但还不能。

Answer 1

$stateParams应该可以解决问题。要使用它，您需要在路由时指定参数。例如:

(function(){
  'use strict';

  angular
    .module('app')
    .config(ApplicationConfig);

    //set dependencies for ApplicationConfig
    ApplicationConfig.$inject = ['$stateProvider'];

    function ApplicationConfig($stateProvider){
      //Define route states
      $stateProvider
      .state('main', {
        abstract: true,
        url: '/main',
        templateUrl: 'pages/main/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main',
        cache: true,
        params: {
          user: null
        }
      });
    }

然后你使用$state.go('stateName', { param: param }) ，例如(遵循前面的示例):

//Inside your original controller
function goToMainPage(param) {
  $state.go('main', { user: param });
}

最后，您可以通过执行 $stateParams.param 来访问目标 Controller 内的参数。 ，或者，在前面的示例中，$stateParams.user .