Я хочу отобразить HTML-страницу с кодом angularjs ($compile/ng-bind-html не работает)

Я новичок в angularjs. В моем проекте я получаю HTML-файл как http-ответ. ng-bind-html работает с HTML-кодом. Но код angularjs внутри html не компилируется. Я пробовал решения с $ 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>
Источник

3 ответа

Решение

Я попытался с iframe,, и это работает,,,:) Либо мы должны сохранить ответ в файле HTML и использовать его следующим образом,,,,,,,

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

Или мы можем напрямую присвоить ему переменную rootscore.

<iframe width="100%" height="500px" ng-attr-srcdoc="{{htmlResponse}}"></iframe>
Источник

Вы должны попробовать использовать ту же версию angularjs и ngsanitize, которая решила ту же проблему для меня!

Источник

Если вам нужно отобразить необработанный HTML-контент в представлении страницы с AngularJS, вы можете использовать сервис $sce, который поставляется с AngularJS. $sce означает Строгий контекстный выход. У сервиса есть метод trustAsHTML с произвольным текстом или HTML.

См. Это: http://learnwebtutorials.com/using-angularjs-sce-trustashtml-raw-html

Также это: Как вы используете $sce.trustAsHtml(string) для репликации ng-bind-html-unsafe в Angular 1.2+

Источник
Другие вопросы по тегам