Question

我刚开始用棱角分明的冒险。我有一个非常简单的应用程序，它应该呈现从控制器获取的json的内容（Spring Boot asap created app）。 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

Answer 1

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

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

元素未在Angular中呈现

1 个答案: