AngularJS 不是函数异常答案

【问题标题】：AngularJS Not a function exceptionAngularJS 不是函数异常
【发布时间】：2017-02-17 14:27:19
【问题描述】：

大家好，我遇到了 Angular 项目的问题。我的项目是一个 HTML 页面，我在 head 标签中有以下 JS 代码：

var app = angular.module('App', []);
app.controller = ('Data', function ($scope, $http) {
    $http.get('http://www.omdbapi.com/?s=' + my_var).success(function (response) {
        $scope.Movies = response.Search;
    });
});

我的相关内容如下：

<body ng-app="App">
    ...
    <table id="search-results-container" ng-controller="Data">
        <tr>
            <td>
                <img src="{{fetched.Poster}}" alt="" />
            </td>
            <td>
                <div class="result-content">
                    <a href="#" onclick="return false;" class="movie-title"><h2>{{fetched.Title}}</h2></a>
                    <label>Year: {{fetched.Year}}</label>
                </div>
            </td>
        </tr>
    </table>

我在 Inspect Element 控制台收到以下错误：

错误 1：

GET file:///C:/Users/user/path_to_page/%7B%7Bfetched.Poster%7D%7D  net::ERR_FILE_NOT_FOUND

错误 2：

Error: [ng:areq] http://errors.angularjs.org/1.5.6/ng/areq?p0=Data&p1=not%20a%20function%2C%20got%20undefined
at angular.js:38
at sb (angular.js:1911)
at Qa (angular.js:1921)
at angular.js:10153
at $f (angular.js:9272)
at n (angular.js:9065)
at g (angular.js:8459)
at g (angular.js:8462)
at g (angular.js:8462)
at g (angular.js:8462)

我是 AngularJS 的新手，我不知道我在做什么，我已经在谷歌上搜索了 2 天...感谢任何帮助，谢谢

【问题讨论】：

试试app.controller('Data', function ($scope, $http) {而不是app.controller = ('Data', function ($scope, $http) {
哇，谢谢@dan，做了一些技巧，但现在我的数据返回空白... json 文件具有以下格式：omdbapi.com/?s=starwars 我尝试将其设置为 $scope.Movies = response 而不是 @987654330 @ 但这也没有用。非常感谢你的帮助，谢谢
哦，第一个错误仍然存在我不明白为什么它试图从我的计算机中获取名称为 {{fetched.Poster}} 的文件
没问题。我添加了一个我认为可以解决一些问题的答案。

标签： javascript html angularjs arrays json

【解决方案1】：

您使用<img src="{{fetched.Poster}}" alt="" />。浏览器会自动发送一个获取请求来检索图像。更好的方法是使用 ng-src。它可能看起来像 <img ng-src="{{fetched.Poster}}" alt="" /> 这里是 AngularJS 文档中的 link。

我找不到你的声明和你的变量初始化。只要没有存储有效的url，浏览器仍然无法获取图片。

在您的 a-tag 中，您不应使用 onclick。请改用 ng-click 指令。

希望这个答案对你有所帮助。

【讨论】：

【解决方案2】：

获取的海报在您的 HTML 中： . 您似乎试图从 $http 响应中填充图像。

Google 一个简单的例子？

【讨论】：

如果您在$scope.Movies = response.Search; 上方添加console.log(response);，您可以输出响应并查看返回的数据。从那里您可以确定要如何输出它。
看起来response.Search 会有一个对象数组。所以你想寻找 ng-repeat 可能输出所有这些？这是一个相当简单的示例，应该可以帮助您：[w3schools.com/angular/ng_ng-repeat.asp]

【解决方案3】：

如果这是你想要的，你可以检查这个 plunker： https://plnkr.co/edit/S5AXFLCxD9unwAGo1THY?p=preview

应该是：

 $scope.Movies = response.data.Search;

【讨论】：

【解决方案4】：

正如 cmets 中所讨论的，您有一些小问题。

首先，app.controller = ( 应该是app.controller(

其次，围绕 $http.get 的语法略有不同。查看the docs。

第三，在 HTML 中，你需要引用你应用到 $scope 的变量名。 IE。 Movies，而不是fetched。

最后，因为 API 返回一个结果数组，你可能想使用ng-repeat。

完整示例：

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var app = angular.module('App', []);
            app.controller('Data', function ($scope, $http) {
                var my_var = "starwars"
                $http.get('http://www.omdbapi.com/?s=' + my_var).then(function success(response) {
                    $scope.Movies = response.data.Search;
                }, function error(err) {
                    console.log(err)
                })
            });
        </script>
    </head>
    <bodyy ng-app="App">
        <table id="search-results-container" ng-controller="Data">
            <tr ng-repeat="movie in Movies">
                <td>
                    <img ng-if="movie.Poster !== 'N/A'" ng-src="{{movie.Poster}}" alt="" />
                    <div ng-if="movie.Poster === 'N/A'">No poster</div> 
                </td>
                <td>
                    <div class="result-content">
                        <a href="#" onclick="return false;" class="movie-title"><h2>{{movie.Title}}</h2></a>
                        <label>Year: {{movie.Year}}</label>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

您看到的 ERR_FILE_NOT_FOUND 错误是因为 API 返回 N/A 的海报 URL。你需要一些逻辑来很好地处理这个问题。

【讨论】：

【解决方案5】：

正如其他人所说，您正在覆盖控制器功能，而不是调用它。

但你也有其他问题：

my_var 从未被声明。
检查then 调用是否成功，而不是success（这将失败；）
您返回的数据在response.data 下，因此您正在寻找response.data.Search。

这就是你要找的东西：

var app = angular.module('App', []);
app.controller('Data', function ($scope, $http) {
    var my_var = 'starwars'
    $http.get('http://www.omdbapi.com/?s=' + my_var).then(function (response) {
        $scope.Movies = response.data.Search;
    });
});

最后，您想要迭代结果，对吗？所以不知道fetched 应该在您的列表中究竟是什么，我重新定义了它以符合我的期望。

将您的 <tr> 更改为：

<tr ng-repeat="fetched in Movies">

这将迭代 Movies 并将 fetched 分配给每次迭代的值。

【讨论】：