Question

我对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 &amp; 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>

Answer 1

好的，您需要在控制器中注入 $ 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

希望它有所帮助。

如何分别查看所需的id内容

1 个答案: