Question

我试图从这个API获取信息：

在我的main.js文件中，我有一个请求http请求的控制器：

        (function(){
    var app = angular.module('provider',['provider-movies']);

    app.controller('ProviderController',['$http',function($http){
        var provider = this;
        provider.movies =[];

        $http.get('/http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').succes(function(data){
            provider.movies = data;
        });
    }]);
})();

然后在我的html中，我试图像这样打印电影的标题：

   <div ng-controller="ProviderController as provider">       
    <p>{{provider.movies.title}}</p>       
   </div>

但是当我在浏览器上加载文件时，它只显示：

{{provider.movies.title}}

Angular已安装并正常工作，如果我添加{{'hello '+'you'}}，则会打印**hello you**

关于为什么这不起作用的任何想法？

另外，我的html看起来像这样：

    <!doctype html>
<html ng-app="provider">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
        <script src="bower_components/angular/angular.min.js"></script>
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>

   <div ng-controller="ProviderController as provider">       
        <p>{{provider.movies.title}}</p>  
       <p>{{'hello'}}</p> 
   </div>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>


    </body>
</html>

谢谢！

Answer 1

您似乎有一些错字和缺少右括号。如果你看一下webbrowser的控制台，你肯定应该看到这个。

试试这个：

(function() {
    var app = angular.module('provider', []);

    app.controller('ProviderController', [ '$http', function($http) {
        var provider = this;
        provider.movies = [];

        $http.get('http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').success(function(data) {
            provider.movies = data;
        });
    }]);
})();

同样在您的标记中，provider.movies是一个不包含title属性的数组：

<div ng-controller="ProviderController as provider">
    <p>{{provider.movies}}</p>       
</div>

如果你想拥有title，你可以考虑循环使用它们：

<p ng-repeat="movie in provider.movies">
    {{movie.title}}
</p>

这是working plunkr。

简单的http get请求没有出现在角度js中

1 个答案: