元素没有在角度呈现

问题描述：

我刚刚开始我的角度冒险。我有非常简单的应用程序，它应该呈现从控制器（Spring Boot asap创建的应用程序）获取的json的内容。视图应该显示人员列表，它与控制器中提供的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

答

Threre're两种可供选择的方法来创建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; 
      }); 
}

元素没有在角度呈现

相关推荐