javascript - 将数据渲染成 Angular 时遇到问题

Question

目前我正在尝试以 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

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

至于后端(api)，它确实显示了我想要使用 POSTMAN chrome 工具的特定数据，但是当涉及到 Angular 时，我真的很困惑如何将数据呈现为 html。

服务.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;
        });

});

应用程序路由.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>

到目前为止，我无法使用 angular 正确呈现数据，而使用 node/express 我可以使用 POSTMAN 查询我想要的数据。我一无所知，请把我从这种 Angular 给我的困惑中解救出来:)

Answer 1

我已经检查了你的代码，你可以改进以下部分:

1. 与其在 Controller 中使用var vm = this，不如将所有对象绑定(bind)到$scope，这是双向数据绑定(bind)的关键.例如

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

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

   <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>
   

2. 请记住，then(function(response)) 只会将一个参数传递给链式函数，而 .success(function(data, status, headers, config) ) 将从 HTTP 响应中检索数据。然后你加载单个故事的代码可以转换为

   Story.getSingleStory($routeParams.user_name, $routeParams.story_id)
   .then(function(data, status, headers, config) {
       $scope.storyData = data;
   });
   

   现在我们可以在 View 中访问storyData。

3. 您的故事服务中存在一个小错误。将 generateReq('GET', '/api/' + user_name + story_id) 更改为 generateReq('GET', '/api/' + user_name + '/' + story_id)