Javascript AngularJS$http将原始HTML元素放入主体中_Javascript_Html_Angularjs

Javascript AngularJS$http将原始HTML元素放入主体中

javascript html angularjs

Javascript AngularJS$http将原始HTML元素放入主体中,javascript,html,angularjs,Javascript,Html,Angularjs,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> &

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的响应是：{{message}
var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope，$http）{
$http({
方法：“张贴”，
url:“process.php”
})
.然后（功能（响应）{
//第一个函数处理成功
$scope.message=response.data；
}，功能（回应）{
//第二个函数句柄错误
$scope.message=response.status+'（'+response.statusText+'）；
})
});

process.php

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

process.html的回复是：

嘿，你好吗…？

您可以看到输出并不像预期的那样。它将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>


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope、$http、$sce）{
$http({
方法：“张贴”，
url:“process.php”
})
.然后（功能（响应）{
//第一个函数处理成功
$scope.message=response.data；
$scope.messageHtml=$sce.trustAsHtml（$scope.message）
}，功能（回应）{
//第二个函数句柄错误
$scope.messageHtml=response.status+'（'+response.statusText+'）；
})
});

您可以像这样使用ng bind html

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

您可以像这样使用ng bind html

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

您必须使用

ng bind html

指令

参考：

来自process.php的响应是：

您必须使用

ng bind html

指令

参考：

来自process.php的响应是：

找到解决方案

我必须将

$sce

与

ng bind html

一起使用

HTML

控制器

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

找到解决方案

我必须将

$sce

与

ng bind html

一起使用

HTML

控制器

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

检查此代码：

<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>


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope、$http、$sce）{
$http({
方法：“张贴”，
url:“process.php”
})
.然后（功能（响应）{
//第一个函数处理成功
$scope.message=$sce.trustAsHtml（response.data）；
}，功能（回应）{
//第二个函数句柄错误
$scope.message=response.status+'（'+response.statusText+'）；
})
});
来自process.php的响应是：

检查此代码：

<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>


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope、$http、$sce）{
$http({
方法：“张贴”，
url:“process.php”
})
.然后（功能（响应）{
//第一个函数处理成功
$scope.message=$sce.trustAsHtml（response.data）；
}，功能（回应）{
//第二个函数句柄错误
$scope.message=response.status+'（'+response.statusText+'）；
})
});
来自process.php的响应是：

我已经为这个场景创建了一个指令。您需要在项目中包含

(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>

{{message | to_trusted}}

我已经为这个场景创建了一个指令。您需要在项目中包含

(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>

{{message | to_trusted}}

已尝试，但没有输出什么错误，您是否收到..$sanitize服务必须加载，但没有输出什么错误，您是否收到..$sanitize服务必须加载，但没有输出，但没有输出是正确的，我已经回答了上面的代码。谢谢BDW更重要的是，你的问题已经解决，谢谢这是正确的，我已经回答了上面的代码。感谢BDW更重要的是，您的问题已解决，感谢使用

ng bind html

From

ng bind html

From