AngularJS $ HTTP поместить необработанный HTML элемент в теле

test.html

<html> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

    <p>Response from process.php is : {{message}}</p> 

    <script> 
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope, $http){ 
     $http({ 
     method : "post", 
     url : "process.php" 
     }) 
     .then(function(response){ 
     // First function handle success 
     $scope.message = response.data; 
     }, function(response){ 
     // Second function handle error 
     $scope.message = response.status +' ('+ response.statusText + ')'; 
     }) 
    }); 
    </script> 
</body> 
</html>

process.php

<?php 
    $data = "<h1>Hey, how are you...???</h1>"; 
    echo $data; 
?>

Ответ process.html является: <h1>Hey, how are you...???</h1>

Вы можете видеть, что вывод не так, как ожидалось. Он помещает элемент h1 в корпус. Но выход должен быть , заголовок. Как я могу это сделать .. ?? Любые предложения, пожалуйста.

решаемые

<div ng-bind-html="messageHtml"></div> 

    <script> 
     var app = angular.module("myApp", []); 
     app.controller("myCtrl", function($scope, $http, $sce){ 
      $http({ 
       method : "post", 
       url : "process.php" 
       }) 
       .then(function(response){ 
       // First function handle success 
       $scope.message = response.data; 
       $scope.messageHtml = $sce.trustAsHtml($scope.message) 
       }, function(response){ 
        // Second function handle error 
        $scope.messageHtml = response.status +' ('+ response.statusText + ')'; 
       }) 
      }); 
    </script>

источник

2016-12-08 Rahul Sarkar

Используйте 'нг-Bind-html' От https://docs.angularjs.org/api/ng/directive/ngBindHtml –

вы можете использовать нг-связывать-HTML, как этот

<p ng-bind-html="message" ></p>

источник

2016-12-08 05:29:17 kva

Пробовал , но нет вывода –

Вы должны использовать ng-bind-html директиву.

Ref: https://docs.angularjs.org/api/ng/directive/ngBindHtml

<p>Response from process.php is : </p><div ng-bind-html="message"></div>

источник

2016-12-08 05:31:14

Пробовал, но нет вывода –

Какая ошибка, вы получаете .. $ sanitize service необходимо загрузить –

Решено. Пожалуйста, проверьте мой ответ выше –

Найдено решение

я должен использовать $sce с ng-bind-html.

HTML

<p ng-bind-html="messageHtml"></p>

Контроллер

$scope.message = response.data; 
$scope.messageHtml = $sce.trustAsHtml($scope.message)

источник

2016-12-08 05:42:58

Проверьте этот код:

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script> 
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope, $http,$sce){ 
     $http({ 
     method : "post", 
     url : "process.php" 
     }) 
     .then(function(response){ 
     // First function handle success 
     $scope.message = $sce.trustAsHtml(response.data); 
     }, function(response){ 
     // Second function handle error 
     $scope.message = response.status +' ('+ response.statusText + ')'; 
     }) 
    }); 
    </script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <p>Response from process.php is : <span ng-bind-html="message"></span></p> 
</body> 
</html>

источник

2016-12-08 06:00:53

Да, это правильно, я уже ответил на этот код выше. Спасибо bdw –

Важнее, ваша проблема исправлена, спасибо –

Я создал директиву п или только этот сценарий. Вы должны иметь в своем проекте angular-sanitize.

(function() { 
    'use strict'; 

    angular 
     .module('yourModule') 
     .filter('to_trusted', ['$sce', function ($sce) { 
      return function (text) { 
       return $sce.trustAsHtml(text); 
      }; 
     }]); 
})();

Тогда в вашем HTML, вы можете написать:

<p>{{message | to_trusted}}</p>

источник

2016-12-08 06:01:12 SaoBiz

Нет, не работает. –

AngularJS $ HTTP поместить необработанный HTML элемент в теле

ответ

Смежные вопросы