Insert HTML into View from Angularjs Controller

Insert HTML into view from AngularJS controller

For Angular 1.x, use ng-bind-html in the HTML:

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

At this point you would get a attempting to use an unsafe value in a safe context error so you need to either use ngSanitize or $sce to resolve that.

$sce

Use $sce.trustAsHtml() in the controller to convert the html string.

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

There are 2 steps:

include the angular-sanitize.min.js resource, i.e.:

<script src="lib/angular/angular-sanitize.min.js"></script>

In a js file (controller or usually app.js), include ngSanitize, i.e.:

angular.module('myApp', ['myApp.filters', 'myApp.services', 
    'myApp.directives', 'ngSanitize'])

Display HTML in AngularJS

Starting from version 1.2.0, angular contains $sce service, that can be used to mark html as "safe"

UPDATED JSFIDDLE

angular

.module('myApp',[])

.controller('MyCtrl', function($scope, $sce) {

    $scope.procedures = [

        {

            icon: $sce.trustAsHtml('<i class="fa fa-american-sign-language-interpreting" aria-hidden="true">i am icon</i>'),

            text: 'test text',

            number: 1,

            price: 10000

        }

    ];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="MyCtrl">

    <ul class="procedures">

        <li ng-repeat="procedure in procedures">

            <h4><a href="#" ng-click="show = !show" ng-bind-html="procedure.icon"></a></h4>

             <div class="procedure-details" ng-show="show">

                <p>text here: {{procedure.text}}</p>

                <p>your number is: {{procedure.number}}</p>

                <p>price you will pay: {{procedure.price}}</p>

             </div>

        </li>

    </ul>

  </div>

</div>

Insert html using angularjs between div tags

I'm tad bit confused regarding your issue, but when I need to inject dynamic HTML I use the following directive:

   app.directive('dynamic', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function (html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
}]);

In my Angular controller I save the HTML string to a scope variable

var $scope.myScopeVariable = '<div>My HTML Goes HERE</div>';

, and in my html page, I use:

<div dynamic = "myScopeVariable">

Hopefully, this will help you.

how to call a html file from a controller in angularjs?

You can simply use the ng-include directive to achieve this:

index.html

<html>
  <head>
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="myApp" ng-cloak>
    <div ng-controller="MainCtrl">
      <div id="all-employees" ng-show="!selectedEmployee">
        <table>
          <thead>
            <tr>
              <td>ID</td>
              <td>Name</td>
              <td>Age</td>
              <td>Options</td>
            <tr>
          </thead>
          <tbody>
            <tr ng-repeat="employee in employees">
              <td>{{ $index }}</td>
              <td>{{ employee.name }}</td>
              <td>{{ employee.age }}</td>
              <td><button ng-click="edit($index)">Edit</button></td>
            <tr>
          </tbody>
        </table>
      </div>

      <div id="selected-employee" ng-hide="!selectedEmployee">
        <div ng-include="'views/edit.html'"></div>
        <button ng-click="selectedEmployee = undefined">Back</button>
      </div>
    </div>
  </body>
</html>

lib/script.js

angular.module('myApp', []).controller('MainCtrl', function($scope, EmployeeService) {

  $scope.employees = [
    {name: 'test', age: 24},
    {name: 'guest', age: 29},
    {name: 'fest', age: 39}
  ];

  $scope.edit = function(index) {
    EmployeeService.editEmployee(id).then(function (response) {
        if(!response) {
          console.log("no response");
        } else {
          $scope.selectedEmployee = response.data;
        }
    }, function (err) {
        if(err) {
          console.log(err);
        }
    });
  };

  $scope.unsetSelection = function() {
    $scope.selectedEmployee = undefined;
  };
});

views/edit.html

<div>
  <h3>Employee Detail</h3>
  <div>{{ selectedEmployee.name }}</div>
  <div>{{ selectedEmployee.age }}</div>
</div>

AngularJS: How to render HTML in $scope variable in view?

Since you are using angular 1.6.x, you have to use .then and .catch instead of .success and .error because the latter are deprecated in newer versions.

  (function() {
        angular.module("BlogApp", []).controller("BlogController", BlogController);
        function BlogController($scope, $http) {
            $scope.createPost=createPost;

            getAllPosts();

        function getAllPosts() {
                $http.get("/api/blogpost").then(function(response) {
                    $scope.posts=response.data; //check if this is what you are looking for
                });
            }

            function createPost(post) {
                console.log(post);
                $http.post("/api/blogpost", post);
            }
        }
    })();

AngularJS: Insert HTML from a string

Have a look at the example in this link :

http://docs.angularjs.org/api/ngSanitize.$sanitize

Basically, angular has a directive to insert html into pages. In your case you can insert the html using the ng-bind-html directive like so :

If you already have done all this :

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope) {
  var str = "HELLO!";
  $scope.htmlString = htmlString(str);
}
Ctrl.$inject = ["$scope"];

Then in your html within the scope of that controller, you could

<div ng-bind-html="htmlString"></div>

How to use an AngularjS View (.html file) without using it's tags

So I just changed .directive to .controller and posted it alongside the other controllers in the app and not the directives... I guess I was confused with that!

.controller('PortfolioView', ["$scope",
    function ($scope) {
        $scope.stuff = 'stuff'; 
    }])

Insert HTML into View from Angularjs Controller