如何从服务器获取带有HTML标记的文本并通过HTML标记在客户端显示它？（使用php和angularjs）

Question

我正在尝试通过创建一个应用程序来学习Web开发。 我在客户端使用Angularjs，在服务器端使用php。 用户选择文章时，我需要从服务器加载文章的内容。 我想在服务器端进行html标记，然后在客户端获取文本并显示它。 （即，我想将文本另存为“ <h1>标题</ h1> <p>段落</ p>”，然后将文本传输到客户端并在客户端中显示。

我尝试用标记标签在php文件中回显文本，然后通过angularjs中的$ http服务获取文本。 但是浏览器似乎无法识别标记标签，而是显示带有文本的html标签。

我该如何实现？

notes2.php

 <?php
    $variable = <<<XYZ
                <html>
                <body>
                    <h1>Heading</h1>
                    <p> paragraph </p>
                </body>
                </html>
XYZ;

    echo $variable;
 ?>

getnotes.html

<!DOCTYPE html>
<html>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
<p id="demo"></p>

<script>
var app = angular.module("myApp", ["ngRoute"]);

app.controller('myCtrl', ['$scope', '$http', function($scope, $http){

$http.get("http://localhost:8080/json_test/notes2.php").then(function(response) {
            $scope.myText = response.data;
        });
}]);
</script>

<script>
document.getElementById("demo").innerHTML = "{{myText}}";
</script>

</body>
</html>

Answer 1

如果您在angular应用程序中没有任何角度绑定，则可以使用ng-bind-html将字符串绑定为HTML。 像这样：

// in controller
$scope.html = "< h1>Heading< /h1> < p>paragraph< /p>";

// in HTML
<div ng-bind-html="html"></div>

如果有任何角度绑定，则可以使用$compile服务进行绑定。 $compile创建与范围成角度绑定的DOM元素。 那就是您通常用来使DOM具有双向绑定等功能的方式。 在大多数情况下，您无需手动调用它，因为如果将template或templateUrl添加到直接定义对象中，它将自动运行$compile 。

Answer 2

为什么不在控制器的作用域内像这样写<script> document.getElementById("demo").innerHTML = $scope.myText; </script> <script> document.getElementById("demo").innerHTML = $scope.myText; </script>

如何从服务器获取带有HTML标记的文本并通过HTML标记在客户端显示它？（使用php和angularjs）

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-04-10 05:56:07

解决方案2
0 2017-04-10 06:11:54

如何从服务器获取带有HTML标记的文本并通过HTML标记在客户端显示它？ （使用php和angularjs）

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-04-10 05:56:07

解决方案2 0 2017-04-10 06:11:54

如何从服务器获取带有HTML标记的文本并通过HTML标记在客户端显示它？（使用php和angularjs）

解决方案1
0 已采纳 2017-04-10 05:56:07

解决方案2
0 2017-04-10 06:11:54