将数据渲染到 angular 时遇到问题

Question

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

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

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.

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 查询我想要的数据。我一无所知，请把我从 angular 给我的困惑中解救出来 :)

Answer 1

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

为此，您必须先在您的应用中包含 ngSanitize 模块。

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

然后您可以注入 $sce 服务，让您信任 html 内容。下面的代码有一个数据 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>

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

Insert HTML into view using AngularJS
ngBindHtml

Answer 2

如果您想在控制器上设置值并在 html 视图中查看它们。在控制器的范围内设置视图模型而不是使用它。 This 和 scope 并不总是一回事，对于绑定，我相信你需要 scope。

Answer 3

这些表达式

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

似乎没有绑定到 'StoryController'

中的任何变量

尝试使用

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

Answer 4

我已经看过你的代码，你可以改进以下部分：

而不是在你的控制器中使用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中访问了。它比 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;
});
```
现在我们可以在视图中访问storyData。
您的故事服务中存在一个小错误。将 generateReq('GET', '/api/' + user_name + story_id) 更改为 generateReq('GET', '/api/' + user_name + '/' + story_id)

将数据渲染到 angular 时遇到问题

Having trouble on rendering data to angular

javascript

angularjs

node.js

mean-stack