使用angularjs显示整个html文件？

Question

我正在尝试使用 Spring Boot 和 AngularJS 开发应用程序。这里的问题是 HTML (Twitter Bootstrap 3) 文件存储在 DB 中。而且我不知道如何使用 AngularJS 加载/显示这个 HTML 文件。

到目前为止，我的 AngularJS 控制器如下所示：

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
        });
    };
});

我不能使用<div ng-include="{{template}}"></div>，因为我不能在<div> 元素中包含整个HTML。并且 HTML 文件将使用headers 和footers 非常频繁地更新。所以除了渲染它并在浏览器中显示之外，我对 HTML 无能为力。我怎样才能做到这一点？

Answer 1

这很简单...

这是您的更新代码。

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>

Answer 2

您可以使用 ng-bind-html 将 HTML 绑定到 div

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

在您的控制器中：

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;
        });
    };
});