Question

目前我正在尝试使用node / express作为后端呈现角度的特定数据。

我想要实现的是，只要用户点击特定故事，它就会链接到属于创建故事的用户的特定故事页面。

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工具的具体数据，但是当涉及到角度时，我真的很混淆如何将数据呈现给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>

到目前为止，我无法使用angular设置正确的数据，而使用node / express我可以使用POSTMAN查询我想要的数据。我很无能为力，请拯救我摆脱这种让我感到特别困惑的困惑：）

Answer 1

我已经完成了您的代码，您可以改进以下部分：

您应该将所有对象绑定到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;
  });

然后可以直接在View中访问stories。它比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>

请注意，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。
您的Story Service中有一个小错误。将generateReq('GET', '/api/' + user_name + story_id)更改为generateReq('GET', '/api/' + user_name + '/' + story_id)

Answer 2

您的问题可能是由于您的故事数据为html，因此默认情况下不受信任。出于安全原因，Angular不允许您直接将html呈现到页面中，而是必须明确告诉Angular信任html内容

要执行此操作，您必须先在应用中添加ngSanitize模块。

angular.module('app', ['ngSanitize']);

然后，您可以注入允许您信任html内容的$sce服务。下面的代码有一个数据item，其中包含一个名为Html的属性，其中包含从api返回的原始html文本。我只是用$sce.trustAsHtml()方法返回的$ sce信任对象覆盖这个原始的html文本。

item.Html = $sce.trustAsHtml(item.Html);

一旦您信任您的html，您现在可以使用ng-bind-html属性自由呈现它。

<div ng-bind-html="item.Html"></div>

有关更多信息和更多示例，请参阅：

Answer 3

如果要在控制器上设置值并在html视图中查看它们。在控制器的范围上设置视图模型而不是使用它。这个和范围并不总是相同的，对于绑定我相信你需要范围。

Answer 4

这些表达

// file: single.html
{{ main.user.name }}
<p>{{ story.content }}</p>

似乎与'StoryController'

中的任何变量无关

尝试使用

// file: single.html
{{ story.storyData.user.name }}
<p>{{ story.storyData.content }}</p>

无法将数据渲染为角度

4 个答案: