渲染数据到角度时遇到麻烦

debugcn 发表于 Dev

气枪怪胎

目前，我正在尝试使用node / express作为后端在angular上呈现特定数据。

我要实现的目标是，每当用户单击特定故事时，它将链接到属于创建该故事的用户的特定故事页面。

api.js

apiRouter.get('/:user_name/:story_id', function(req, res) {

            User.findOne({ name: req.params.user_name }, function(err, user, next) {

                if(err) return next(err);

                Story.findById(req.params.story_id, function(err, story) {

                    if(err) {
                        res.send(err);
                        return;
                    }

                    res.json({
                        name: user.name,
                        story_id: story._id,
                        content: story.content

                    });
                });
            });
        });

至于backend（api），它确实显示了我想要的POSTMAN chrome工具所需的特定数据，但是当涉及到角度时，我真的对如何将数据呈现到html感到困惑。

service.js

storyFactory.getSingleStory = function(user_name, story_id) {
        return $http.get('/api/' + user_name + story_id);
    }

controller.js

angular.module('storyCtrl', ['storyService'])

.controller('StoryController', function(Story, $routeParams) {

    var vm = this;


    Story.getSingleStory($routeParams.user_name, $routeParams.story_id)
        .success(function(data) {
            vm.storyData = data;
        });

});

app.routes.js

.when('/:user_name/:story_id', {
            templateUrl: 'app/views/pages/users/single.html',
            controller: 'StoryController',
            controllerAs: 'story'
        })

index.html（仅显示到single.html的行）

<a href="/{{ main.user.name }}/{{ each._id }}"><h4>{{ each.content }}</h4>

single.html

Hello {{ main.user.name }}

<p>{{ story.content }}</p>

到目前为止，当使用node / express时，我无法设法用角度正确地渲染数据，但是我可以使用POSTMAN查询所需的数据。我无能为力，请让我摆脱这种棱角分明的给我带来的困惑:)

Rebornix

我已经遍历了您的代码，您可以在以下几方面进行改进：

而不是var vm = this在控制器中使用，您应该将所有对象绑定到$scope，这是双向数据绑定的关键。例如

angular.module('storyCtrl', ['storyService'])
.controller('StoryController', function($scope, Story, $routeParams) {
  var vm = this;
  Story.all().success(function(data) {
    $scope.stories = data;
  });

然后stories可以直接在View中访问。它比controllerName.storiesHTML更具可读性。

<div class="col-md-6" ng-controller="StoryController as story">
  <div class="panel-body" ng-repeat="story in stories">
    <div class="comment-text">
      <a href="/{{ main.user.name }}/{{ story._id }}"><h4>{{ story.content }}</h4></a>
    </div>
  </div>
</div>

请记住，在从HTTP响应中检索数据时，then(function(response))只会将一个参数传递给链接函数.success(function(data, status, headers, config))。然后，您可以将加载单个故事的代码转换为
```
Story.getSingleStory($routeParams.user_name, $routeParams.story_id)
.then(function(data, status, headers, config) {
    $scope.storyData = data;
});
```
现在我们可以storyData在View中访问。
您的Story Service中有一个小错误。更改generateReq('GET', '/api/' + user_name + story_id)为generateReq('GET', '/api/' + user_name + '/' + story_id)