Javascript AngularJS服务运行良好，但未正确调用电影_Javascript_Angularjs

Javascript AngularJS服务运行良好，但未正确调用电影

javascript angularjs

Javascript AngularJS服务运行良好，但未正确调用电影,javascript,angularjs,Javascript,Angularjs,我正在用腐烂的西红柿制作一个API服务，我看不到任何被调用的电影。当我输入TOY时，它应该返回包含单词TOY的电影标题。但是，每当我在页面中搜索电影时，我现在得到的是灰色的轮廓框。如何使电影正确显示在我的页面上？PS很抱歉所有这些代码，它向您展示了我的项目是如何工作的编辑：我似乎无法让幻灯片切换工作。请帮忙。谢谢示例如图所示：这是我的密码： API.html <div> <img src="{{mov

我正在用腐烂的西红柿制作一个API服务，我看不到任何被调用的电影。当我输入TOY时，它应该返回包含单词TOY的电影标题。但是，每当我在页面中搜索电影时，我现在得到的是灰色的轮廓框。如何使电影正确显示在我的页面上？PS很抱歉所有这些代码，它向您展示了我的项目是如何工作的

编辑：我似乎无法让幻灯片切换工作。请帮忙。谢谢示例如图所示：

这是我的密码：

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>

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

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

apidirection.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
        });

    })
}

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

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

apiFactory.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
        });

    })
}

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

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

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

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

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

控制台和movieLoader.getMovies中没有错误消息未调用？没有，没有一条。我正在查看代码，没有发现我做错了什么。顺便问一下，我怎么称呼movieLoader.getMovies@sdfacredenote：此行

Window.jQuery=jQuery没有意义，因为全局对象是window
，而将jQuery globale放在第一行