我想将参数值从一个页面传递到另一个页面而不显示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”
请告诉我如何在这种情况下使用参数,或者是否有更好的方法来解决这个问题。
答案 0 :(得分:4)
检查answer 它提供了一个带有两种参数的工作示例。
确保您的使用情况匹配:
ui-sref='stateName({param: value, param: value})'
好的..我为你准备了Plunker :)
Params
属性的位置,它应该位于根级别(相同的url
属性级别)template: 'Test3.html',
更改为templateUrl: 'Test3.html',
home.requestsummary.hello
中的home.requestsummary
个孩子定义了'homedetailview@home'
,我认为您需要将'test2detailview@home.requestsummary'
与<div ui-view="test2detailview"></div>
联系起来,并在Test2中拥有[
{
"new_agent": {
"id": "8ab86c18-3fae-4804-bfd9-c3d6e8f66260",
"name": "BoJack Horseman",
"primary_skillset": ["bills-questions"],
"secondary_skillset": []
}
},
{
"new_job": {
"id": "f26e890b-df8e-422e-a39c-7762aa0bac36",
"tipo": "rewards-question",
"urgent": false
}
},
{
"job_request": {
"agent_id": "ed0e23ef-6c2b-430c-9b90-cd4f1ff74c88"
}
}
]
html的希望这个回答你兄弟:)
答案 1 :(得分:2)
Maybe the param is not resolved yet? What if you try:
public class FragmentThree extends Fragment {
//... Click method of the button calls
getActivity().startService(new Intent(getActivity(),gps_service.class));
Note the added myApp.controller("ctrlRequestDetail", ['$rootScope', '$scope', '$stateParams', ($rootScope, $scope, $stateParams) => {
$rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) => {
console.log(toParams, fromParams)
});
}]);
dependency