在将数据呈现为angular度时遇到麻烦

目前我正在试图呈现一个特定的数据angular度与节点/expression作为后端。

我试图实现的是，无论何时用户点击一个特定的故事，它都会链接到属于创build故事的用户的特定故事页面。

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铬工具的具体数据，但是当涉及到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度，而与节点/快递我可以用POSTMAN查询我想要的数据。 我很笨，请把我从这个混乱中拯救出来，angular度给我:)

Answer 1

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

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> 

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

Answer 2

如果你想在控制器上设置值并在html视图中看到它们。 在控制器的作用域上设置视图模型，而不是使用它。 这和范围并不总是相同的事情和约束力，我相信你需要范围。

Answer 3

这些expression式

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

似乎并没有绑定到'StoryController'任何variables

尝试使用

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

Answer 4

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

要做到这一点，你必须首先在你的应用程序中包含ngSanitize模块。

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

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

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

一旦你信任你的html，你现在可以使用ng-bind-html属性来渲染它。

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

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

• 使用AngularJS将HTML插入到视图中
• ngBindHtml