Twitter Bootstrap Question posted in

Display entire html file using angularjs? – Twitter bootstrap

I am trying to develop an application using Spring Boot and AngularJS. The problem here is the HTML (Twitter Bootstrap 3) file is stored in DB. And I don’t have any idea how to load/display this HTML file using AngularJS.

So far my AngularJS controller looks something like below:

myApp.controller('initCtrl', function($scope,$http) {
    console.log('init ctrl');
    $scope.info= {};
    $scope.init= function(){
        console.log($scope.info);
        $http.post('load',$scope.info).then(function(response){
            console.log(response.data);//Getting Entire HTML file using Spring Controller from db
            //enter code here
        });
    };
});

I can’t use <div ng-include="{{template}}"></div> as I can’t include an entire HTML inside a <div> element. And the HTML file will be updated very frequently with headers and footers. So there is not much I can do with the HTML except to render it and display in the browser. How can I achieve this?

Tags:

2

Answers


  1. 0

    You can bind HTML to div by using ng-bind-html

    <div ng-show="htmlFlag" ng-bind-html="htmlData"></div>

    In your Controller:

    myApp.controller('initCtrl', function($scope,$http) {
    console.log('init ctrl');
    $scope.htmlFlag = false;
    $scope.info= {};
    $scope.init= function(){
        console.log($scope.info);
        $http.post('load',$scope.info).then(function(response){
            console.log(response.data);
            $scope.htmlFlag = false; 
            $scope.htmlData = response.data;
            $scope.htmlFlag = true;
        });
    };
});
    Login or Signup to reply.
  2. 0

    It’s very simple…

    Here is your updated code.

    Contoroller

    myApp.controller('initCtrl', function($scope,$http) {
    console.log('init ctrl');
    $scope.info= {};
    $scope.init= function(){
        console.log($scope.info);
        $http.post('load',$scope.info).then(function(response){
            console.log(response.data);//Getting Entire HTML file using Spring Controller from db
            $scope.renderHtml = response.data;
        });
    };
});

    HTML

    <div ng-bind-html="renderHtml"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search