0

I have an example of what I am developing in CodePen:

CodePen my example

The page in codePen are not compiling Angular variables, so I will explain. The page loads in the left one video and in the right loads a list of videos, it's working, but I need to make a button that load more videos in that list.

I try this with text and it's appending the same result and if I try to display an image it's blocking the url with the error $sanitize:badparse:

$scope.divHtmlVar = '';
      $scope.carregaMais = function( itemId, nextPage) {     
      YoutubeService.getPlaylistItems(itemId, nextPage);         
      $scope.divHtmlVar = $scope.divHtmlVar + '<div class="col-xs-12 col-sm-8 col-md-4 col-lg-6"><a href="#"><img class="img-responsive" src=' + $scope.thumb+ 'alt="Video Image"><br/><i>'+nextPage+'</i>';                    
  }
gise
  • 13
  • 2
  • 10

1 Answers1

0

You shouldn't really inject HTML in your angular app. Just create a template and bind it to your controller. You'll have a markup for your video list for example, which uses ng-repeat to render your list of data. And about ng-sanitize, if its filtering something out you don't wish to, examine the docs and change its config.

Nexus
  • 968
  • 1
  • 12
  • 31
  • Thanks, I changed, and this works, I know what is template, but I didn't understand how to bind, do you have an example? http://codepen.io/Gisesonia/pen/OpGRzp – gise Apr 17 '17 at 22:58
  • Now I find another problem, the functions doesn't work in the ng-bind-html, I found some answers, but I don't know how to apply in this case. Example: [link](http://stackoverflow.com/questions/31825405/ng-click-not-working-inside-the-controller-using-of-ng-bind-html). I am trying to load videos with append because it's loading 5 at time if it's not a good pratice how should I do. – gise Apr 18 '17 at 21:02