Question

我是网页设计和角色的新手，我正在复制类似于this的内容，我使用RESTful网络服务并使用AngularJS在JSON中显示信息。

它似乎不适合我。我的main.jsp文件如下：

<!doctype html>
<html ng-app>
<head>
    <title>Your Bill</title>

    <!-- Include the AngularJS library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

    <!-- BillParser script -->
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <div ng-controller="GetBill">
        <p>The ID is {{bill.id}}</p>
        <p>The content is {{bill.content}}</p>
    </div>
</body>
</html>

我的app.js看起来像：

function GetBill($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
    success(function(data) {
        $scope.bill = data;
        console.log('INITTED');
    });
}

但它在localhost / billparser / index上看起来如下：

The ID is {{bill.id}}

The content is {{bill.content}}

我有什么明显的遗失吗？请原谅＆＃39;命名，它最终会成为与账单有关的东西，我只想让Angular先工作！

看起来我收到以下错误：

https://docs.angularjs.org/error/ng/areq?p0=GetBill&p1=not%20a%20function,%20got%20undefined

我需要做些什么来解决这个问题？我之前从未使用过js，所以这对我来说都是新手！

感谢您的时间。

Answer 1

我当然希望你在控制器中有这个：

app.controller('GetBill', ['$scope', '$http', function($scope , $http) { 

$http.get('http://rest-service.guides.spring.io/greeting').
    success(function(data) {
        $scope.bill = data;
        console.log($scope.bill);
    });
}]);

检查控制台是否有正确的数据。 console.log($scope.bill);

Answer 2

在我看来，您在这里错过了一些内容：实际上在 AngularJS 应用程序中创建控制器和注册。

从The AngularJS documentation on Controllers (link here)开始，您的 app.js 文件应如下所示：

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

myApp.controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';
}]);

这是特色示例。在您的情况下，更准确地说，它将是：

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

myApp.controller('GetBill', ['$scope', '$http', function($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').success(function(data) {
        $scope.bill = data;
        // console.log('INITTED');
    });
}]);

......应该这样做！

Answer 3

按照其他人的建议创建控制器后，根据您的数据，您可能需要在视图中进行ng-repeat。例如，如果getBill返回的数据是一个对象数组;在将数据分配给$ scope.bill（您已经使用过）后，您必须进入视图并将其更改为：

  <div ng-controller="GetBill">
     <div ng-repeat="b in bill">
      <p>The ID is {{b.id}}</p>        
      <p>The content is {{b.content}}</p>        
    </div>
 </div>

但是如果你没有得到阵列，你不必担心它。

AngularJS无法正常工作 - 无法获取变量

3 个答案: