Я мало знаком с процессом 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) {
}
}
});
Но я не знаю, каков правильный поток работы, чтобы получить идентификатор от объекта и передать его в 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>
Хорошо, что вам нужно впрыснуть $ routeParams в контроллере для получения доступа к параметру маршрута/с, то присвоить id
параметра в переменной 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
для доступа к назначенной переменной id
.
Например
angular.module("tcpApp")
.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) {
}
};
});
Надеюсь, поможет.