我对angular-route
进程并不熟悉。从服务器我得到id
的对象。当用户点击相应的元素时,我想fetch
对应id
的数据,并需要在新页面中显示详细信息。
这是我从后端收到的对象:
{
"project": {
"issueResolved": 27,
"issueReported": 83,
"remaining": 304444906,
"invoiceRaised": 202816725,
"elapsed": 1694,
"slipage": 351,
"splash": true,
"projectNote": "In incididunt sit elit cillum consequat proident veniam et.",
"projectName": "project0"
},
"id": "61b7f5af909e89a2"
}
在路线配置中,我添加了id
作为参数,如下所示:
$routeProvider
.when ("/projectSummary/:id", { //hre is the id.
templateUrl : "views/projectSummary/projectSummary.html",
controller : "projectSummaryController",
className : "body-projectSummary"
});
在元素中,我添加了一个链接,用url
更新id
- 就像这样:
.directive("activeTitle", function() {
return {
replace: true, //ng-href has id
template: '<a ng-href="#/projectSummary/:id"><h2 class="active"><span class="title">{{activeApp.projectName}}</span><span class="note">{{activeApp.projectNote}}</span></h2></a>',
link: function(scope, element, attrs) {
}
}
});
但我不知道从对象获取id并将其传递给url
并因此获取对象内容的正确工作流程是什么。请问我这里有正确的工作流程吗?
我的控制员:
"use strict";
angular.module("tcpApp")
.controller("homeController",
['$scope','server', '$location', '$anchorScroll', '$timeout',
function ($scope, server, $location, $anchorScroll, $timeout) {
//on click of sub title updates to active title
$scope.activate = function (num, item) {
$scope.currentIndex = $scope.splashApps.indexOf(item);
$scope.splashApps.splice($scope.currentIndex, 1, $scope.activeApp);
$scope.activeApp = item;
$scope.activeStatus = $scope.activeApp.name;
$scope.slipageCounter();
}
$scope.splash = server.query();
$scope.splash.$promise.then(function (result) {
$scope.allApps = result;
$scope.galleryAppsLength = $scope.allApps.length;
//filtering splash apps
angular.forEach( $scope.allApps, function (app) {
if(app.project.splash) {
this.push(app.project);
}
}, $scope.splashApps);
splashAppsHandler();
});
}]);
HTML模板:
<div class="content">
<header-navi></header-navi>
<div class="prSummaryTab">
<div class="prSummaryBox">
<h2>Project Info</h2>
<div>
<span>Description: </span>
<span>Construction, completion and somethign will be there for aasf sfasf asf asfs </span>
</div>
<div>
04 MAR 2015
<a href="#"><!--comment--></a><a href="#"><!--comment--></a>
</div>
</div>
<div class="prSummaryBox">
<h2>Project Status</h2>
<span>Design</span>
</div>
<div class="prSummaryBox">
<h2>Contract Amount</h2>
<span>92,016,4597</span>
</div>
<div class="prSummaryBox">
<h2>Issues Details</h2>
<span>17</span>
</div>
<ul class="naviPrInfo">
<li class="active" ><a href="#">Status</a></li>
<li><a href="#">Civil</a></li>
<li><a href="#">Mechanical</a></li>
<li><a href="#">Electrical</a></li>
<li><a href="#">Engineering</a></li>
<li><a href="#">Operation & Maintanance</a></li>
</ul>
</div>
<!-- inner content starts -->
<div class="summaryContent">
<!-- need to fill with id content -->
</div>
<gallery-menu></gallery-menu>
<div class="appGallery" ng-show="galleryShow">
<a ng-click="galleryChanger(-1)" class="prev">prev</a>
<a ng-click="galleryChanger(1)" class="next">next</a>
<all-apps-gallery index="$index" app="app" update="update(app)" class="show" ng-repeat="app in allAppsBatch"></all-apps-gallery>
</div>
</div>
<!-- footer -->
<body-footer></body-footer>
答案 0 :(得分:2)
好的,您需要在控制器中注入 $ routeParams 以访问路由参数/ s ,然后将id
参数分配给变量{{1} }。 例如 id
。
$scope.id = $routeParams.id;
您需要在angular.module("tcpApp")
.controller("homeController", ['$scope', '$routeParams', 'server', '$location', '$anchorScroll', '$timeout',
function($scope, $routeParams, server, $location, $anchorScroll, $timeout) {
$scope.id = $routeParams.id; // This is the code to fetch the `id` parameter.
//on click of sub title updates to active title
$scope.activate = function(num, item) {
$scope.currentIndex = $scope.splashApps.indexOf(item);
$scope.splashApps.splice($scope.currentIndex, 1, $scope.activeApp);
$scope.activeApp = item;
$scope.activeStatus = $scope.activeApp.name;
$scope.slipageCounter();
};
$scope.splash = server.query();
$scope.splash.$promise.then(function(result) {
$scope.allApps = result;
$scope.galleryAppsLength = $scope.allApps.length;
//filtering splash apps
angular.forEach($scope.allApps, function(app) {
if (app.project.splash) {
this.push(app.project);
}
}, $scope.splashApps);
splashAppsHandler();
});
}]);
指令中将:id
更改为{{id}}
才能访问指定的activeTitle
变量。
<强> E.g。强>
id
希望它有所帮助。