如何单独查看需要id的内容

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"
        });

在元素中我添加了一个 link 以将 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 来访问 路由 parameter/s 然后分配 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();

            });
        }]);

您需要在 activeTitle 指令中将 :id 更改为 {{id}} 以访问分配的 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) {
                }
            };
        });

希望对你有帮助。

如何单独查看需要id的内容

How to view separately required id's content

angularjs

angular-routing