0

我是 angularjs 的新手。在我的项目中,我得到一个 HTML 文件作为 http 响应。ng-bind-html 适用于 html 代码。但是html 中的 angularjs 代码没有被编译。我尝试了 $compile 的解决方案,但没有任何效果。请为此提出一个好的解决方案。

假设我们有一个这样的示例代码:

    <!DOCTYPE html>
    <html>
     <head>
    <meta charset="utf-8" />
    <title>TEST</title>
    <script src="angular.js"></script> 
     </head>
     <body ng-app="myapp">
     <div ng-controller="myController">
     <p compile="htmlresponse"></p>
     </div>

 <script>
 var app = angular.module('myapp', []);
 app.controller('myController', function ($rootScope,$sce) {
  $http.get(,,,,).success(function(data){
  $rootScope.htmlResponse=$sce.trustAsHtml(data);
  }
 });

 app.directive('compile', function($compile) {
  // directive factory creates a link function
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compile);
      },
      function(htmlResponse) {
        element.html(htmlResponse);
        $compile(element.contents())(scope);
      }
    );
  };
});

 </script> 
</body>
</html>

如果我只得到 HTML 作为响应,这很好用。当我使用 angularjs(包括 app.module、app.controller、app.directives)获取 HTML 时,只有 html 部分被编译。请帮我解决这个问题。

这是我的示例回复。

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-animate.min.js"></script> 
 </head>
 <body ng-app="myapp">
 <div ng-controller="myController">
   {{name.myname}}
 </div>

 <script>
 var app = angular.module('myapp', []);
 app.controller('myController', function ($scope) {
    $scope.name={};
  $scope.name.myname = "stack";
 });

 </script> 
</body>
</html>
4

3 回答 3

2

我尝试使用 iframe,它可以工作,,,:) 我们必须将响应保存在 HTML 文件中并像这样使用它,,,,,,,

<iframe src="htmlResponse.html"> </iframe>

或者我们可以直接将rootscope变量赋值给它。

<iframe width="100%" height="500px" ng-attr-srcdoc="{{htmlResponse}}"></iframe>
于 2015-04-23T06:06:44.363 回答
1

您应该尝试使用相同版本的 angularjs 和 ngsanitize,这为我解决了同样的问题!

于 2015-08-04T12:51:32.513 回答
0

如果您需要使用 AngularJS 将原始 HTML 内容显示到页面视图,您可以使用 AngularJS 附带的 $sce 服务。$sce 代表严格的上下文转义。该服务具有 trustAsHTML 方法,可以获取一些任意文本或 HTML。

参考这个: http: //learnwebtutorials.com/using-angularjs-sce-trustashtml-raw-html

还有这个:你如何使用 $sce.trustAsHtml(string) 在 Angular 1.2+ 中复制 ng-bind-html-unsafe

于 2015-04-22T11:49:47.197 回答