Angular $routeParams 空对象
Angular $routeParams empty object
我正在尝试使用 angular 的 routeParams 从我的 url 获取查询值。
我在我的 html 页面中包含了 angular-路线:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
在我的应用程序中包含 Ng-Route:
var app = angular.module('app', [
'ngRoute',
'reportController'
]);
并按如下方式设置我的控制器:
var reportController = angular.module('reportController', []);
reportController.controller('CandidateCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
console.log(JSON.stringify($routeParams, null, 4));
$scope.person = $routeParams.person;
}]);
然而,当我访问以下 URL 时,routeParams 是一个空对象:{}。
http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad
我做错了什么?
编辑:
我已经配置了可能的路线 - 我的 routeParams 对象仍然为空。我试过:
famaApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/report:person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});
}]);
和
when('/report?person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});
您必须设置您的路由以使用 $routeProvider 接收您想要的参数。
示例:
app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {
$routeProvider
.when('/',
{
templateUrl: 'someHtmlUrl',
controller: 'someController',
controllerAs: 'someCtrl',
caseInsensitiveMatch: true
})
.when('/:person',
{
templateUrl: 'someHtmlUrl',
controller: 'someController',
controllerAs: 'someCtrl',
caseInsensitiveMatch: true
})
.otherwise(
{
templateUrl: 'someHtmlUrl'
});
$locationProvider.html5Mode(true); //Use html5Mode so your angular routes don't have #/route
}]);
那你就可以
http://localhost:8080/afe75cc7-fa61-41b3-871d-119691cbe5a
并且 $routeProvider 将调用您的 html 和您的控制器,正如您在 .when('/:person'.. 中看到的那样然后您可以尝试访问您的 $routeParams 并且您将拥有你在那里的人,$routeParams.person.
而不是像这样访问
http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad
尝试访问它
http://localhost:8080/#/report/afe75cc7-fa61-41b3-871d-119691cbe5ad
您将在 $route.Params
中获得 guid
我正在尝试使用 angular 的 routeParams 从我的 url 获取查询值。
我在我的 html 页面中包含了 angular-路线:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
在我的应用程序中包含 Ng-Route:
var app = angular.module('app', [
'ngRoute',
'reportController'
]);
并按如下方式设置我的控制器:
var reportController = angular.module('reportController', []);
reportController.controller('CandidateCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
console.log(JSON.stringify($routeParams, null, 4));
$scope.person = $routeParams.person;
}]);
然而,当我访问以下 URL 时,routeParams 是一个空对象:{}。
http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad
我做错了什么?
编辑:
我已经配置了可能的路线 - 我的 routeParams 对象仍然为空。我试过:
famaApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/report:person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});
}]);
和
when('/report?person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});
您必须设置您的路由以使用 $routeProvider 接收您想要的参数。
示例:
app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {
$routeProvider
.when('/',
{
templateUrl: 'someHtmlUrl',
controller: 'someController',
controllerAs: 'someCtrl',
caseInsensitiveMatch: true
})
.when('/:person',
{
templateUrl: 'someHtmlUrl',
controller: 'someController',
controllerAs: 'someCtrl',
caseInsensitiveMatch: true
})
.otherwise(
{
templateUrl: 'someHtmlUrl'
});
$locationProvider.html5Mode(true); //Use html5Mode so your angular routes don't have #/route
}]);
那你就可以
http://localhost:8080/afe75cc7-fa61-41b3-871d-119691cbe5a
并且 $routeProvider 将调用您的 html 和您的控制器,正如您在 .when('/:person'.. 中看到的那样然后您可以尝试访问您的 $routeParams 并且您将拥有你在那里的人,$routeParams.person.
而不是像这样访问 http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad
尝试访问它 http://localhost:8080/#/report/afe75cc7-fa61-41b3-871d-119691cbe5ad
您将在 $route.Params