AngularJS：如何在视图中的 $scope 变量中呈现 HTML？ [复制]答案

【问题标题】：AngularJS: How to render HTML in $scope variable in view? [duplicate]AngularJS：如何在视图中的 $scope 变量中呈现 HTML？ [复制]
【发布时间】：2018-05-18 23:24:04
【问题描述】：

我一直在尝试使用 MEAN 堆栈创建博客应用程序。我在将帖子呈现为 HTML 时遇到问题。在浏览器上，它只是显示{{posts}}

HTML 代码：

<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="app.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="container" ng-controller="BlogController">
            <h1>Blog</h1>
            <input ng-model="post.title" class="form-control" placeholder="title"/>
            <textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
            <button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>

            {{posts}}

        </div>
    </body>
</html>

角度代码：

(function() {
    angular.module("BlogApp", []).controller("BlogController", BlogController);
    function BlogController($scope, $http) {
        $scope.createPost=createPost;

        function init() {
            getAllPosts();
        }

        init();

        function getAllPosts() {
            $http.get("/api/blogpost").success(function(posts) {
                $scope.posts=posts;
            });
        }

        function createPost(post) {
            console.log(post);
            $http.post("/api/blogpost", post);
        }
    }
})();

【问题讨论】：

标签： javascript angularjs node.js html mean-stack

【解决方案1】：

由于您使用的是 angular 1.6.x，因此您必须使用 .then 和 .catch 而不是 .success 和 .error，因为后者在较新的版本中已被弃用。

  (function() {
        angular.module("BlogApp", []).controller("BlogController", BlogController);
        function BlogController($scope, $http) {
            $scope.createPost=createPost;

            getAllPosts();

        function getAllPosts() {
                $http.get("/api/blogpost").then(function(response) {
                    $scope.posts=response.data; //check if this is what you are looking for
                });
            }

            function createPost(post) {
                console.log(post);
                $http.post("/api/blogpost", post);
            }
        }
    })();

【讨论】：

【解决方案2】：

你的 getAllPosts 函数应该使用 .then 而不是 .success 因为 .success 在 1.3 以上的角度版本中已被弃用

  function getAllPosts() {
     $http.get("/api/blogpost").then(function(response) {
         $scope.posts=response.data; 
      });
   }

【讨论】：