元素未在 Angular 中呈现答案

【问题标题】：Element not being rendered in Angular元素未在 Angular 中呈现
【发布时间】：2017-08-14 07:37:04
【问题描述】：

我刚刚开始了我的 Angular 冒险之旅。我有一个非常简单的应用程序，它应该呈现从控制器（Spring Boot asap 创建的应用程序）获取的 json 内容。 View 应该显示人员列表，它应该与控制器中提供的 json 一起工作，但是当我切换到 $http.get 时，列表没有被呈现。

我知道控制器被要求提供数据（我有日志，并在前端进行了调试）它只是一个空视图，这有点问题。不知怎的，我感觉它与$scope 有联系，但我太新鲜了，无法理解问题所在。

这是我的代码：

index.html：

<!DOCTYPE html>
<html lang="en" ng-app="peoplePopulator">
<head>
    <link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.min.css"/>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-resource/angular-resource.min.js"></script>
    <script src="app/myApp.js"></script>
    <script src="app/peoplePopulator.js"></script>
</head>
<body>
<people-consumer></people-consumer>
</body>
</html>

myApp.js：

var peoplePopulator = angular.module('peoplePopulator', []);

peoplePopulator.js：

angular.module('peoplePopulator').component('peopleConsumer', {
    template:
    '<ul>' +
    '<li ng-repeat="man in $ctrl.people">' +
    '<p>This is the value for id: {{man.id}}</p>' +
    '<p>This is the value for name: {{man.name}}</p>' +
    '<p>This is the value for surname: {{man.surname}}</p>' +
    '<p>This is the value for age: {{man.age}}</p>' +
    '<p>This is the value for sex: {{man.sex}}</p>' +
    '</li>' +
    '</ul>',
    controller: function PeopleController($scope, $http) {
       $http.get('http://localhost:8080/getAllPeople').
                then(function(response) {
                    $scope.people = response.data;
                });
    }
});

日志：

Added: PersonDto{id=null, name='ran1.6077897002879162E308', surname='dom389401569', age=423647022, sex='F'}
Added: PersonDto{id=null, name='ran1.7927508063734304E308', surname='dom139179403', age=135916746, sex='F'}
Added: PersonDto{id=null, name='ran5.491516947272879E307', surname='dom601187307', age=1882764612, sex='F'}
Fetching records from all over the world
HHH000397: Using ASTQueryTranslatorFactory
Fetching records from all over the world <- logger in the getAllPeople controller

【问题讨论】：

标签： javascript html angularjs spring-boot

【解决方案1】：

有两种创建 angularjs 组件的替代方法：指令（较旧且具有更多功能 https://docs.angularjs.org/guide/directive）和组件（较新，指令的子集，它有助于定义合理的默认值并迁移到 Angular 2+ https://docs.angularjs.org/guide/component ）。您在代码中使用了组件。这意味着您在默认情况下在视图中使用 $ctrl 进行操作。因此，您的代码应如下所示：

 controller: function PeopleController($scope, $http) {
   var $ctrl = this;
   $http.get('http://localhost:8080/getAllPeople').
            then(function(response) {
                $ctrl.people = response.data;
            });
}

【讨论】：