Skip to main content
 首页 » 编程设计

angularjs之Angular UI路由器| $ stateParams不起作用

2024年09月07日12zhwl

好像$stateParams无法正常工作。
通过日期是这样的:

$state.go('state2', { someParam : 'broken magic' }); 

在目标状态上忽略参数
console.log('state2 params:', $stateParams); // return empty object {} 

代码:
    var app = angular.module('app', [ 
     'ui.router' 
    ]); 
 
    app.config(function($stateProvider) { 
      $stateProvider 
            .state('state1', { 
                url: '', 
                templateUrl: 'state-1.html', 
                controller : function ($scope, $state, $stateParams) { 
                  $scope.go = function () { 
                    $state.go('state2', { someParam : 'broken magic' }); 
                  }; 
 
                  console.log('state1 params:', $stateParams); 
                } 
            }) 
            .state('state2', { 
                url: 'state2', 
                templateUrl: 'state-2.html', 
                controller : function ($scope, $state, $stateParams) { 
                  $scope.go = function () { 
                    $state.go('state1', { someOtherParam : 'lazy lizard' }); 
                  }; 
 
                  console.log('state2 params:', $stateParams); 
                } 
            }); 
    }); 

可以找到实时示例here

谢谢。

请您参考如下方法:

您不能在状态之间传递任意参数,需要将它们定义为$stateProvider定义的一部分。例如。

$stateProvider 
    .state('contacts.detail', { 
        url: "/contacts/:contactId", 
        templateUrl: 'contacts.detail.html', 
        controller: function ($stateParams) { 
            console.log($stateParams); 
        } 
    }) ... 

上面的代码将输出定义了contactId属性的对象。如果转到 /contacts/42,则 $stateParams将为 {contactId: 42}

有关更多信息,请参见 documentation for UI-Router URL Routing