Question

我正在开展一个pokedex项目，我目前正在从pokeAPI中提取数据，以根据他们在搜索栏中输入的名称获取有关不同口袋妖怪的信息。在这一点上，它应该用所述口袋妖怪的数据填满页面。它会暂时显示所有数据。它会在消失前闪烁在屏幕上。只有几件最终留在屏幕上我仍然是node.js的新东西，所以非常欢迎任何和所有的帮助/建议！

编辑：所以我让它工作的方式只是改变它以拥有一个pokeData和pokeData2并分别在需要时调用它们。原因是我认为它们在同一个变量上并不重要，因为它们处于不同的功能中。在阅读并得到一些答案后，我意识到这是多么愚蠢。

这是我的代码。 HTML：

<section class="header">
<div class="searchSync">
    <form>
        <button type="submit" class="searchButton " ng-click='getPokes(); getMorePokes()'>
        <img class="PokeCon" src ="../Fonts/PokeBall.png"></button>
        <input type="text" class="searchBar" ng-model="pokeName " placeholder="Search your Pokedex!">
    </form>
</div>
<div class="pokeTitle pokeFont">
    PokeDev
</div>


<section class="pokedexScreen">

    <div class="pokeDisplay">
        <div class="pokeProfilePic">
            <img class="Profile" ng-src='{{pokeData.sprites.front_default}}'>
            <h3 class='pokeName'>{{pokeData.name.toUpperCase()}}</h3>
        </div>

        <div class="pokeDescription">
            <p class='pokeHeight'>Meters:{{pokeData.height}}</p>
            <h6 class='pokeWeight'>Weight:{{pokeData.weight}}</h6>


        </div>
        <div class="otherPokeInfo">
            <p class='pokedexNumber'>#{{pokeData.id}}</p>
            <h3 class='pokeFlavorText'>{{pokeData.flavor_text_entries[53].flavor_text}}</h3>


        </div>
</section>
<section class="pokedexScreen"

控制器：

// INITILIZE CONTROLLER
// ============================================================
angular.module("app").controller("pokeCtrl", function($scope, pokeService) {

// VARIABLES
// ============================================================


// FUNCTIONS
// ============================================================
$scope.getPokes = function() {
    pokeService.getPokes($scope.pokeName.toLowerCase())
        .then(function(response) {
            console.log(pokeService, response);
            $scope.pokeData = response;
        })
}

//=====================================================================

$scope.getMorePokes = function() {
    pokeService.getMorePokes($scope.pokeName.toLowerCase())
        .then(function(response) {
            console.log(pokeService, response);
            $scope.pokeData = response;
        })
}

});

服务：

// INITILIZE SERVICE
// ============================================================
angular.module("app").service("pokeService", function($http) {

// CRUD FUNCTIONS
// ============================================================
this.getMorePokes = function(pokeName) {
    return $http({
        url: 'http://pokeapi.co/api/v2/pokemon-species/' + pokeName,
        method: 'GET'
    }).then(function(response) {
        console.log('service:', response);
        return response.data;

    })
}
this.getPokes = function(pokeName) {
    return $http({
        url: 'http://pokeapi.co/api/v2/pokemon/' + pokeName,
        method: 'GET'
    }).then(function(response) {
        // console.log('service:', response);
        return response.data;

    })
}

}）;

Answer 1

您已将结果分配到pokeData和getPokes

中的getMorePokes

$scope.pokeData = response;

因此，首先从API返回的内容将被返回的任何内容覆盖。

在你的模板中，你似乎只展示了一个神奇宝贝。您需要稍微努力才能显示更多内容。例如，您可以使用ngRepeat（https://docs.angularjs.org/api/ng/directive/ngRepeat）。

Answer 2

我相信你会从两个功能中分配给$scope.pokeData，这些功能会在一两分钟之后让它失效。

$scope.getMorePokes = function() {
    pokeService.getMorePokes($scope.pokeName.toLowerCase())
        .then(function(response) {
            $scope.pokeData = response;     <== This is the issue in my view, more pokes should be set in some sort of an array, its currently overwriting the previous pokeData
        })
}

此外，很高兴看到您现在在服务中有更简化的方法。

为什么我的程序只显示我正在制作的$ http请求的片段？

2 个答案: