Question

我正在使用烂番茄制作API服务，我无法看到任何正在调用的电影。当我输入TOY时，它应该返回带有玩具单词的电影标题。但是，每当我在我的页面中搜索电影时，我现在得到的是灰色轮廓框。如何正确地在我的页面上显示电影？ PS抱歉所有这些代码，它向您展示我的项目是如何工作的。

编辑：我似乎无法让slideToggle工作。请帮忙。谢谢！示例在图像中： http://i.stack.imgur.com/Ng0q3.png

这是我的代码：

API.html

        <div>               
            <img src="{{movie.posters.thumbnail}}" />
            <h2>{{movie.title}}</h2>
        </div>
        <div>
            <p>{{movie.synopsis}}</p>
            <dl>
                <dt>Rating</dt>
                <dd>{{movie.mpaa_rating}}</dd>

                <dt>Year</dt>
                <dd>{{movie.year}}</dd>

                <dt>Critics Score</dt>
                <dd>{{movie.ratings.critics_score}}</dd>

                <dt>Audience Score</dt>
                <dd>{{movie.ratings.audience_score}}</dd>

                <dt>Theater Release Date</dt>
                <dd>{{movie.release_dates.theater}}</dd>

                <dt>DVD Release Date</dt>
                <dd>{{movie.release_dates.dvd}}</dd>
            </dl>
        </div>

apiController.js

    module.exports = ApiController;
function ApiController($scope, movieLoader) {
    $scope.data = {}

    $scope.$watchGroup(['data.q', 'data.page_limit', 'data.page'], function() {
        //Use movie loader
        movieLoader.getMovies($scope.data.q, $scope.data.page_limit, $scope.data.page).then(function(response) {
            $scope.movies = response.data.movies
        });

    })
}

apiDirective.js

module.exports = function() {
    return {
        restrict: 'EA',
        templateUrl: 'api.html',
        link: function(scope, element) {
            //Dom manipulation
            element.click(function() {
                element.children('div').slideToggle();
            });
        }
    };
};

apiFactory.js

module.exports = function apiFactory($http, apiUrl, apiKey) {
        //Return object literal
        return {
            getMovies: function(q, page_limit, page) {
                return $http.jsonp(apiUrl, {
                    params: {                        
                        q: q,
                        page_limit: page_limit,
                        page: page,
                        apikey: apiKey,
                        callback: 'JSON_CALLBACK'
                    }
                });
            }
        }
    }

的index.html

<html ng-app="movieApp">
<head>
    <title>demo</title>
    <script src="bundle.js"></script>
    <link href="styles.css" rel="stylesheet">
</head>
<body ng-controller="moviesController">
    <!--Grab the title-->
    <label for="q">Search Text</label>
    <input type="text" id="q" ng-model="data.q" ng-model-options="{debounce: 500}"/>

    <!--Define how many movies to place in the file-->
    <label for="page_limit">Page Size</label>
    <input type="text"  id="page_limit" ng-model="data.page_limit" ng-model-options="{debounce: 500}"/>

    <!--define what page to look at-->
    <label for="page">Page Number</label>

    <input type="text" id="page" ng-model="data.page" ng-model-options="{debounce: 500}"/>
    <div class="movie" ng-repeat="movie in movies"></div>

</body>
</html>

directiveSearch.html

var jQuery = require('jQuery');
//We must make jquery global for Angular to use it
Window.jQuery = jQuery;
require('angular');
var apiFactory = require('./apiFactory');
var apiController = require('./apiController');
var apiDirective = require('./apiDirective');
angular.module('movieApp', [])
    .factory('movieLoader', apiFactory)
    .controller('moviesController', apiController)
    .directive('movieDirective', apiDirective)
    .constant('apiKey', 'Removed for security purposes')
    .constant('apiUrl', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json');

AngularJS服务正常运行但没有正确调用电影

0 个答案: