AngularJS: 如何在视图的 $scope 变量中渲染 HTML？

Question

我一直在尝试使用 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>

Angular代码：

(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);
        }
    }
})();

Answer 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);
            }
        }
    })();

Answer 2

您的 getAllPosts 函数应使用 .then 而不是 .success 因为 .success 已弃用 angular 1.3 以上版本

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

AngularJS: 如何在视图的 $scope 变量中渲染 HTML？

AngularJS: How to render HTML in $scope variable in view?

html

javascript

node.js

angularjs

mean-stack