Passing HTML content in $scope object in Angular.js

Question

I am new in Angular.js and I am playing with it, I am getting an issue when passing the HTML content with $scope object. It returns as a string on browser.

Here what I am doing with my controller

function htmlCtrl($scope, $http,Project) {
  $http.get('/content').success(function(data){
    //  data contains HTML value 
    $scope.projects=data;
  });
}

And in HTML file I am doing this

body     
  div
    div ng-view
    /div
  /div
      !-- /container --
/body

Any help will be appreciated.

The $sce is what you are looking for, but if you are going to put html snippets, why not use ng-include? — PiniH
– PiniH, Commented Nov 26, 2014 at 8:59

Tien Nguyen · Accepted Answer · 2014-11-26 11:02:40Z

5

Use $sce service.

Like this

$scope.project = $sce.trustAsHtml(data);

As for v1.0.3 use ngSanitize, example of using is here

edited Nov 26, 2014 at 11:02

answered Nov 26, 2014 at 8:56

Tien Nguyen

5994 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tien Nguyen Over a year ago

@abarik, include $sce in service dependency - function htmlCtrl($scope, $http,$sce, Project)

Tien Nguyen Over a year ago

@abarik what version of angular do you use?

abdulbari Over a year ago

I am using this version

Tien Nguyen Over a year ago

@abarik, $sce is available from v1.2. For v1.0.3 which you use try docs.angularjs.org/api/ngSanitize, example of using is here jsfiddle.net/0ajg8m6s

Collectives™ on Stack Overflow

Passing HTML content in $scope object in Angular.js

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related