javascript - Angular - $routeParams.itemID 用于加载domain.com/:itemID ALMOST WORKING?

Question

我希望通过在变量名称前使用冒号来在路由中包含参数

// dynamic pages for each ITEM, once selected
// from $routeParams.itemID in ItemCtrl
.when('/:itemID', {
        templateUrl: 'views/item.html',
        controller: 'ItemController'
})

当单击 div 框时，Angular 应路由到特定项目

<div class="itemBox" ng-click="getItem(item._id)">

现在，对 Node/express API 的调用似乎正在工作

[16:36:18.108] GET http://localhost:8080/api/items/534240001d3066cc11000002 [HTTP/1.1 304 Not Modified 4ms]

但是这个错误记录在控制台中:

Error: Can't set headers after they are sent.
    at ServerResponse.OutgoingMessage.setHeader (http.js:691:11)
    ...
    at Promise.<anonymous> (/Users/Username/Downloads/project/v19/app/routes.js:41:8)
    ...

routes.js 中的第 41 行(41:8？)是 res.json(item);

// load the item model
var Item = require('./models/item');

// get One item
app.get('/api/items/:item_id', function(req, res) {

        // use mongoose to get the one item from the database
        Item.findById({
                _id : req.params.item_id
        },

        function(err, item) {

                // if there is an error retrieving, send the error. nothing after res.send(err) will execute
                if (err)
                        res.send(err)

                res.json(item); // return the item in JSON format
        });
});

虽然问题可能出在 Controller 中，因为所有其他 API 调用都可以工作。所以我尝试在各处传递 $routeParams!

angular.module('ItemCtrl', [])

// inject the Item service.factory into our controller
.controller('ItemController', function($scope, $routeParams, $http, Items, isEmptyObjectFilter) {

        // get an Item after clicking it
        $scope.getItem = function(id, $routeParams) {
                Items.getOne(id, $routeParams)
                        // if successful getByID, call our function to get the Item data
                        .success(function(data, $routeParams) {
                                // assign our Item
                                $scope.item = data;
                                // for use with a parameter in appRoutes.js using itemID as the variable
                                $scope.itemID = $routeParams.itemID;
                        })
                        .error(function(data) {
                                console.log('Error: ' + data);
                        });
        };
});

或者也许是服务？这是否需要将 $routeParams 作为 function(id, $routeParams) 传递

angular.module('ItemService', [])

// super simple service
// each function returns a promise object 
.factory('Items', function($http) {
        return {
                get : function() {
                        return $http.get('/api/items');
                },
                getOne : function(id) {
                        return $http.get('/api/items/' + id);
                },
                create : function(itemData) {
                        return $http.post('/api/items', itemData);
                },
                delete : function(id) {
                        return $http.delete('/api/items/' + id);
                }
        }
});

非常感谢一些调试方面的帮助..谢谢

Answer 1

看起来您正在正确获取数据。问题是你希望在成功获取API调用后改变路由？

$routeParams 不会为您更改路线。那只是获取数据。使用 $location 更改路线。

.controller('ItemController', function($scope, $routeParams, $location, $http, Items, isEmptyObjectFilter) {
$scope.getItem = function(id) {
    Items.getOne(id)
        .success(function(data) {
              $scope.item = data;
              $scope.itemID = $routeParams.itemID;

              // redirect
              $location.path('/' + $routeParams.itemID);
        });
});
});

由于您的所有数据似乎都已准备就绪，因此您只需要 Angular 重定向到路线即可。 $location 应该是要走的路。