[英]AngularJS ui-router not populating params
將ui-router與AngularJS一起使用時,出現一個奇怪的錯誤。
我有一個管理區域,管理員用戶可以使用ui-router通過ui-sref
構造的鏈接來管理用戶和角色。 生成的鏈接應如下所示:
#/admin/users
。 #/admin/users/:key
。 #/admin/users/:key/edit
。 奇怪的是,有時:key
值即使提供了值也沒有填充。 因此,我最終得到的URL看起來像#/admin/users//edit
。 這並非每次都發生,只是有時,但是我不知道為什么會發生。
我已經包含了下面的大多數代碼。 我本該包括一個小矮人,但我無法重現該問題。 對不起,不得不將大量的代碼放入問題中。
index.html的:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project</title>
<link rel="stylesheet" href="vendor/sass-bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/admin.css">
</head>
<body ng-app="myApp" id="ng-app">
<div class="wrapper">
<div ng-include="'app/navigation/navigation.tpl.html'"></div>
<div ui-view="" class="view"></div>
</div>
<script>
// This object is injected by the server and consumed by UserProfile (a custom angularjs service)
window.currentUserProfile = {
username: 'adminUser',
firstname: 'First',
lastname: 'Last',
role: 'Admin',
permissions: ['home.view','admin.view']
};
</script>
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="vendor/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="<!-- javascript-files.js -->"></script>
</body>
</html>
app.js:
'use strict';
angular.module('myApp', [
'ui.router',
// ... other modules ...
'myApp.admin'
])
.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', '/');
$urlRouterProvider.otherwise('/404');
}]);
應用程序/管理/ admin.html:
<div class="container-fluid" id="admin-page">
<div class="row">
<div class="col-md-2">
<div class="well well-sm">
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="item in sections" ui-sref-active="active"><a class="" ui-sref="{{item.state}}">{{item.name}}</a></li>
</ul>
</div>
</div>
<div ui-view="" class="col-md-10"></div>
</div>
</div>
應用程序/管理/ admin.js:
'use strict';
angular.module('myApp.admin', [
'myApp.admin.roles',
'myApp.admin.users'
])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/admin', '/admin/roles');
$stateProvider
.state('admin', {
url: '/admin',
templateUrl: 'app/admin/admin.tpl.html',
controller: 'AdminCtrl',
data: {
requiresPermission: 'admin.view'
}
});
}])
.controller('AdminCtrl', ['$scope', 'UserProfile', function ($scope, UserProfile) {
$scope.sections = [
{name: 'Roles', state: 'admin.roles.list'},
{name: 'Users', state: 'admin.users.list'}
];
}]);
應用程序/管理/用戶/ users.js:
'use strict';
angular.module('myApp.admin.users', [
'ngResource'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('admin.users', {
abstract: true,
url: '/users',
data: {
requiresPermission: 'admin.view'
},
template: '<div ui-view/>'
})
.state('admin.users.list', {
url: '',
templateUrl: 'app/admin/users/index.tpl.html',
controller: 'UsersCtrl',
resolve: {
users: ['User', function(User) {
return User.getAll();
}]
}
})
.state('admin.users.detail', {
url: '/:key',
templateUrl: 'app/admin/users/detail.tpl.html',
controller: 'UserCtrl',
resolve: {
user: ['$stateParams', 'User', function($stateParams, User) {
return User.get({'key':$stateParams.key});
}]
}
})
.state('admin.users.edit', {
url: '/:key/edit',
templateUrl: 'app/admin/users/edit.tpl.html',
controller: 'UserCtrl',
resolve: {
user: ['$stateParams', 'User', function($stateParams, User) {
return User.get({'key':$stateParams.key});
}]
}
});
}])
.controller('UsersCtrl', ['$scope', 'users', 'User', function ($scope, users, User) {
$scope.users = users;
}])
.controller('UserCtrl', ['$scope', 'user', function ($scope, user) {
$scope.user = user;
}])
.factory('User', ['$resource', function ($resource) {
return $resource('api/users/:key', {key:'@key'}, {
update: {method:'PUT'},
getAll: {
method: 'GET',
params: {
key: 'users.json'
},
isArray: true
}
});
}]);
應用程序/管理/用戶/ index.tpl.html:
<div>
<h1>Users</h1>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" ui-sref="admin.users.detail({key: '{{user.id}}' })">
<td>{{user.email}}</td>
<td>{{user.firstname}} {{user.lastname}}</td>
<td>{{user.role.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
應用程序/管理/用戶/ detail.tpl.html
<div>
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<a ui-sref="admin.users.list" class="btn btn-grey" title="Back to Users"><span class="glyphicon glyphicon-arrow-left"></span></a>
</div>
<div class="btn-group">
<a ui-sref="admin.users.edit({key: '{{user.id}}' })" class="btn btn-grey" title="Edit User"><span class="glyphicon glyphicon-pencil"></span></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>{{user.firstname}} {{user.lastname}}</h1>
<p class="lead">{{user.id}} {{user.email}} - {{user.role.name}}</p>
</div>
</div>
</div>
應用程序/管理/用戶/ edit.tpl.html:
<div>
<div class="row">
<div class="col-md-12">
<h1>Edit User</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-md-2 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="email" placeholder="Email" ng-model="user.email">
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-md-2 control-label">First Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="firstname" placeholder="First Name" ng-model="user.firstname">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-2 control-label">Last Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="lastname" placeholder="Last Name" ng-model="user.lastname">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-6">
<a ui-sref="admin.users.detail({'key': '{{user.id}}' })" class="btn btn-primary">Save</a>
</div>
</div>
</form>
</div>
</div>
</div>
任何幫助,將不勝感激。
對我而言突出的一件事是您的ui-sref
指令中對params的奇怪用法。
您在哪里:
ui-sref="admin.users.detail({key: '{{user.id}}' })"
這樣就足夠了:
ui-sref="admin.users.detail({ key: user.id })"
您可以嘗試將ui-sref指令更改為這種格式,然后查看得到的結果嗎? 不需要兩種方式的綁定,因為ui-sref將負責編譯傳入的參數。
又作為另一注; 如果您在ng-repeat
指令中使用track by
,則可以開始排除多個未定義/空/空字符串用戶ID的實例。
因此: ng-repeat="user in users track by user.id"
我希望這能有所幫助。 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
祝好運! :)
也許有一些提示...我試圖解決您的情況。 不得不說,要使用上面的代碼中的ui-sref
來實現#/admin/users//edit
這樣的url:
ui-sref="admin.users.edit({key: user.id})"
必須是undefined
或null
或string.Empty''作為user.id傳遞。
有一個類似您的情況的小插曲 。 這些是該示例中的用戶
var data = [
{ id : "key1", firstname: "firstName1", ... },
{ id : "key2", firstname: "firstName2", .., },
{ id : "" , firstname: "firstNameE", ...},
{ }
];
前兩個確實生成正確/預期的網址
#/admin/users/key1/edit
#/admin/users/key2/edit
如上所述,最后兩個確實會產生#/admin/users//edit
。 因此,我建議您檢查從您的Users資源傳回的值...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.