我想将参数值从一个页面传递到另一个页面而不在 URL 中显示这些值。因为我使用的是 ui-router 所以我遇到了“params”的东西但不知何故我无法让它工作。请看下面的代码示例:-
index.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="../../Scripts/AngularControllers/LoginHomeControllers/RouteMainController.js"></script>
<script src="../../Scripts/AngularControllers/LoginHomeControllers/LoginController.js"></script>
<script src="../Scripts/AngularControllers/Test2Controller.js"></script>
<script src="../Scripts/AngularControllers/Test3Controller.js"></script>
</head>
<body>
<div ui-view="mainview"></div>
</body>
</html>
RouteMainController.js
var app = angular.module("appHome", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('introduction', {
url: '/',
views: {
'mainview':
{
templateUrl: 'Login.html',
controller: 'ctrlLogin'
}
}
})
.state('login', {
url: '/login',
views: {
'mainview':
{
templateUrl: 'Login.html',
controller: 'ctrlLogin'
}
}
})
.state('home', {
url: '/home',
views: {
'mainview':
{
templateUrl: 'Home.html',
}
}
})
.state('home.requestsummary', {
url: '/requestsummary',
views: {
'homedetailview':
{
templateUrl: 'Test2.html',
controller: 'ctrlReqSumm'
}
}
})
.state('home.requestsummary.hello', {
url: '/requestdetail',
views: {
'homedetailview@home':
{
template: 'Test3.html',
controller: 'ctrlRequestDetail',
params: { paramOne: "defaultValueOne" }
}
}
})
});
Login.html
<div>
<button id="btnAdd" type="submit" ng-click="Login()">Login</button>
</div>
LoginController.js
var myApp = angular.module('appHome');
myApp.controller("ctrlLogin", ['$scope', '$location', function ($scope, $location) {
$scope.Login = function () {
window.location.href = '#!home/requestsummary';
}
}]);
Home.html
<!--Sample Code for displaying Menu Tab and corresponding link-->
<li>
<a href="#">Employees <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu">
<li><a ui-sref=".employeeadd">Add Employee Record</a></li>
</ul>
</li>
<div ui-view="homedetailview"></div>
Test2.html
<div>
<div ng-repeat="request in requestData">
{{request.name}}
<a ui-sref=".requestdetail({paramOne:request.Id})">
</a>
</div>
</div>
Test2Controller.js
var myApp = angular.module('appHome');
myApp.controller("ctrlReqSumm", ['$scope', function ($scope) {
$scope.requestData = [{
'Id': "1", 'name': "Hello",
'Id': "2", 'name': "Hi",
'Id': "3", 'name': "OK"
}]
}])
Test3.html
<div>
<label>The id is: </label> {{requestId}}
</div>
Test3Controller.js
var myApp = angular.module('appHome');
myApp.controller("ctrlRequestDetail", ['$scope', '$stateParams', function ($scope, $stateParams) {
$scope.requestId = $stateParams.paramOne;
}]);
所以我想将 paramOne 的值从 Test2.html 传递到 Test3.html 并在那里显示。当前参数 paramOne 显示为 "undefined"
请让我知道如何在这种情况下使用参数，或者是否有更好的方法来解决这个问题。
最佳答案
检查这个answer 它提供了一个具有两种类型参数的工作示例。
make sure that your Usage match:
ui-sref='stateName({param: value, param: value})'
好的..我准备好了Plunker给你 :)
- 你代码中的主要问题是你定义
Params的地方属性，它应该在根级别(相同的url属性级别) - 更改
template: 'Test3.html',成为templateUrl: 'Test3.html', - 自
home.requestsummary.hellohome.requestsummary的 child 状态正如你所定义的，我认为你需要 chenage'homedetailview@home'进入'test2detailview@home.requestsummary', 并有<div ui-view="test2detailview"></div>在 Test2.html 中
希望这个回答你兄弟 :)
关于javascript - UI Router Params 值在目标中未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47756548/