2

我有一个项目，我正在使用 yeoman fullstack 生成器来处理我的用户登录、发布和删除身份验证。我希望能够单击列表中填充的项目，并在另一个页面上查看该项目的更多详细信息。

这是 HTML

<div id="eventsListContainer" class="row">
<div class="col-lg-12">
  <h1 class="listHeader">Nightlife</h1>
  <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in awesomeThings | orderBy: '-date' | filter: 'Nightlife'">
    <li><a class="eventItem" ng-href="/things/:id">
        <p class="eventName">{{thing.name}}</p> 
        <p class="eventDate">{{thing.date}}</p>
        <!-- <button type="button" class="close" ng-click="deleteThing(thing)">&times;</button> -->
    </a></li>
  </ul>
</div>

这是我的视图控制器（所以在我看来，调用获取特定 ID 的函数应该在这里，如果我错了，请纠正我）

angular.module('applicationtonightApp')
.controller('ViewCtrl', function ($scope, $http, socket, $stateParams) {
$scope.awesomeThings = {};

$http.get('/api/things/'+$stateParams._id ).success(function(thing) {
  $scope.awesomeThings = awesomeThings;
  socket.syncUpdates('thing', $scope.awesomeThings);
});

$scope.$on('$destroy', function () {
  socket.unsyncUpdates('thing');
});

})

这是我处理所有功能的控制器，它是由全栈生成器生成的。

/**
 * Using Rails-like standard naming convention for endpoints.
 * GET     /things              ->  index
 * POST    /things              ->  create
 * GET     /things/:id          ->  show
 * PUT     /things/:id          ->  update
* DELETE  /things/:id          ->  destroy
*/

'use strict';

var _ = require('lodash');
var Thing = require('./thing.model');

// Get list of things
exports.index = function(req, res) {
Thing.find(function (err, things) {
if(err) { return handleError(res, err); }
return res.json(200, things);
});
};

// Get a single thing
exports.show = function(req, res) {
 Thing.findById(req.params.id, function (err, thing) {
  if(err) { return handleError(res, err); }
  if(!thing) { return res.send(404); }
  return res.json(thing);
 });
};

// Creates a new thing in the DB.
exports.create = function(req, res) {
 Thing.create(req.body, function(err, thing) {
 if(err) { return handleError(res, err); }
return res.json(201, thing);
});
};

 // Updates an existing thing in the DB.
 exports.update = function(req, res) {
 if(req.body._id) { delete req.body._id; }
Thing.findById(req.params.id, function (err, thing) {
if (err) { return handleError(res, err); }
if(!thing) { return res.send(404); }
var updated = _.merge(thing, req.body);
updated.save(function (err) {
  if (err) { return handleError(res, err); }
  return res.json(200, thing);
});
});
};

// Deletes a thing from the DB.
exports.destroy = function(req, res) {
Thing.findById(req.params.id, function (err, thing) {
if(err) { return handleError(res, err); }
if(!thing) { return res.send(404); }
thing.remove(function(err) {
  if(err) { return handleError(res, err); }
  return res.send(204);
});
});
};

function handleError(res, err) {
 return res.send(500, err);
}

请让我知道我做错了什么或需要改变什么！提前感谢您的宝贵时间。

4

1 回答 1

0

我似乎已经通过摆弄代码并在线查找不同的答案来解决它。我没有在 view.js 中正确调用我的视图，我需要添加 :id 如下。

angular.module('applicationtonightApp')
 .config(function ($routeProvider) {
  $routeProvider
  .when('/view/:id', {
    templateUrl: 'app/view/view.html',
    controller: 'ViewCtrl'
  });
 });

并将我的 view.controller.js 更新为以下内容。

angular.module('applicationtonightApp')
 .controller('ViewCtrl', function ($scope, $http, socket, $routeParams) {
  $scope.awesomeThings = {};

   $http.get('/api/things/'+ $routeParams.id ).success(function(thing) {
  console.log('WORKING');
  $scope.thing = thing;
  socket.syncUpdates('thing', $scope.awesomeThings);
});

$scope.$on('$destroy', function () {
  socket.unsyncUpdates('thing');
});

})

现在这似乎工作正常。

于 2015-04-20T02:58:38.853 回答