Having Trouble On Rendering Data To Angular

Currently I'm trying to render a specific data on angular with node/express as the backend. What I'm trying to achieve is whenever a user clicks a specific story, it will link to

Solution 1:

I have went through your code, and you can improve in following parts:

1. Instead of using var vm = this in your controller, you should bind all objects to $scope, which is the key to two-way data binding. For instance

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

   Then stories can be accessed in View directly. It would be more readable than controllerName.stories in HTML.

   <divclass="col-md-6"ng-controller="StoryController as story"><divclass="panel-body"ng-repeat="story in stories"><divclass="comment-text"><ahref="/{{ main.user.name }}/{{ story._id }}"><h4>{{ story.content }}</h4></a></div></div></div>

2. Keep in mind, then(function(response)) will only pass one parameter to the chained function while .success(function(data, status, headers, config)) will retrieve data from HTTP response. Then your code to load single story can be converted to

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

   Now we can access storyData in View.

3. There is a tiny bug in your Story Service. Change generateReq('GET', '/api/' + user_name + story_id) to generateReq('GET', '/api/' + user_name + '/' + story_id)

Solution 2:

If you want to set values on the controller and see them in the html view. Set the view model on the controller's scope rather than using this. This and scope are not always the same thing and for binding I believe you need scope.

Solution 3:

these expressions

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

don't seem to be bound to any variable in 'StoryController'

Try using

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

Solution 4:

Your problem may be due to the fact that you story data is html and is therefore untrusted by default. For security reasons Angular will not allow you to render html directly into the page, instead you must explicitly tell Angular to trust the html content

To do this you must first include the ngSanitize module in your app.

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

You can then inject the $sce service which allows you to trust the html content. The code below has a data item with a property called Html that contains raw html text returned from an api. I just overwrite this raw html text with the $sce trust object returned from the $sce.trustAsHtml() method.

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

Once you have trusted your html, you are now free to render it using the ng-bind-html attribute.

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

For more information and further examples see:

• Insert HTML into view using AngularJS
• ngBindHtml