我想显示 html 页面，其中有 angularjs 代码（$compile/ng-bind-html 不工作）

Question

我是 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 作为响应，这就可以正常工作。当我得到 HTML 和 angularjs（包括 app.module、app.controller、app.directives）时，只有 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>

Answer 1

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

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

还有这个：How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

Answer 2

我尝试使用 iframe，它有效，，，:) 要么我们必须将响应保存在 HTML 文件中并像这样使用它,

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

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

<iframe width="100%" height="500px" ng-attr-srcdoc="{{htmlResponse}}"></iframe>

Answer 3

您应该尝试使用相同版本的 angularjs 和 ngsanitize，它为我解决了同样的问题！

我想显示 html 页面，其中有 angularjs 代码（$compile/ng-bind-html 不工作）

I want to display html page which has angularjs code ($compile/ng-bind-html not working)

html

angularjs

ng-bind-html

ng-controller