AngularJS 不工作 - 无法获取变量答案

【问题标题】：AngularJS not working - can't pick up variablesAngularJS 不工作 - 无法获取变量
【发布时间】：2015-06-28 13:15:18
【问题描述】：

我是网页设计和 Angular 的新手，我正在复制类似于 this 的内容，我在其中使用 RESTful Web 服务并使用 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}}

我在这里有什么明显的遗漏吗？请原谅“账单”的命名，它最终将与账单有关，我只想让 Angular 先工作！

我似乎收到以下错误：

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

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

感谢您的宝贵时间。

【问题讨论】：

这就是你想要的stackoverflow.com/questions/26646941/…

标签： javascript angularjs

【解决方案1】：

在我看来，您在这里遗漏了一些东西：在您的 AngularJS 应用程序中实际创建 Controller 并注册它。 p>

来自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');
    });
}]);

...应该这样做！

【讨论】：

谢谢。我已将我的 .js 文件更改为看起来像您链接的内容，创建了一个名为“billApp”的角度模块，并带有一个控制器“GetBill”。不幸的是，我现在得到了thiserror - 我不明白为什么，因为在我的 index.jsp 中我有这个集合：<html ng-app="billApp">，这绝对是我的应用程序的名称 (var myApp = angular.module('billApp', []);)。有什么建议么？顺便说一句，感谢您的宝贵时间！
嗯……这似乎没问题。您是否进入了浏览器的调试器并确保您的 js 文件实际上正在被加载？如果是这样，恐怕我帮不上什么忙，我看不出问题出在哪里。理想情况下，如果您可以向我们提供一个 Plunker 链接来重现您的配置和问题，我们很可能能够很快找到解决方案 :)
设法对其进行排序-在查找 .js 文件时遇到了一些问题，我放错了 maven 资源。现在很好用，谢谢！
太棒了！很高兴您开始使用 AngularJS，这是 IMO 的一个很棒的工具。如果您的问题已经解决，请不要犹豫accept an answer :)

【解决方案2】：

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

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

【讨论】：

【解决方案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>

但如果你没有得到一个数组，你不必担心它。

【讨论】：