Javascript 无法将数据渲染到角度

目前，我正在尝试以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工具显示的特定数据，但说到角度，我真的很困惑如何将数据呈现到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的行）

{{each.content}}

single.html

Hello {{ main.user.name }}

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

Hello{{main.user.name}
{{story.content}

---

到目前为止，我无法使用angular正确渲染数据，而使用node/express，我可以使用POSTMAN查询我想要的数据。我不懂，请让我从这种困惑中解脱出来：）

您的问题可能是因为您的故事数据是

html

，因此默认情况下不受信任。出于安全原因，Angular不允许您将html直接呈现到页面中，相反，您必须明确告知Angular信任html内容

为此，您必须首先在应用程序中包含该模块

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

然后，您可以注入允许您信任html内容的服务。下面的代码有一个数据

项

，其属性名为

Html

，包含从api返回的原始Html文本。我只是用

$sce.trustAsHtml（）

方法返回的$sce trust对象覆盖这个原始html文本

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

一旦您信任您的html，现在就可以使用

ng bind html

属性自由地呈现它

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

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

---

如果要在控制器上设置值并在html视图中查看它们。在控制器的作用域上设置视图模型，而不是使用此选项。这和作用域并不总是一回事，对于绑定，我相信您需要作用域。

这些表达式

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

---

我已经阅读了您的代码，您可以在以下方面进行改进：

您不应该在控制器中使用

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;
  });

然后可以在视图中直接访问

故事。它将比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>

现在我们可以访问视图中的
storyData

您的故事服务中有一个小错误。将

generateReq（'GET'，'/api/'+用户名+故事id）

更改为

generateReq（'GET'，'/api/'+用户名+'/'+故事id）

---

在服务的getSingleStory方法中，为什么要调用post方法$http.post（'/api/'+user\u name+story\u id）；而不是$http.get（'/api/'+用户名+'/'故事id）；那是打字错误吗？啊，很抱歉，那是一个打字错误，我会马上纠正的。弄好它，但它不会显示任何内容。你确定这就是问题所在吗？但是为什么我遇到的其他教程没有这个“ngSanitize”模块呢？也许我读错了，我可以从其他建议中看出，您正在努力获取$scope上的数据，以便可以在视图中渲染它。当您处理完这些之后，回到这里，这样您就可以看到如何呈现实际的html，而不仅仅是打印原始字符串。很抱歉搞混了。为什么你说这和范围不是一回事？主要区别是什么？嘿。这里有一个很好的解释，再次感谢您的帮助，我只是想知道angularjs将在2.0版本中删除$scope，这就是为什么我一直使用这个而不是$scope的原因。有什么想法吗？如果更好的话，我会把我所有的代码都改成$scope。如果你转到web应用程序，每当我登录时，我都需要刷新页面以查看用户名。是因为这个吗？我确实更改了singleStory的作用域，但它似乎仍然没有呈现数据。请尝试将“url重定向”代码移动到Auth.getUser（）的“then”阶段。它可能会解决用户名问题。对于数据呈现，您在调试工具中看到的获取单个故事的响应数据是什么？它显示了我想要的响应数据，但奇怪的是它没有呈现

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

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