Question

我还是刚刚接触过angularJS，但是他已经阅读了很多材料，最后开始测试我正在学习的东西。我目前正在尝试编写使用到达last.FM API的服务的代码，并返回类似艺术家的列表。我从API返回结果很好，如果我将它们发送到控制台，可以看到结果。也就是说，在我进行一次搜索后，所有后续搜索都不能正确更新范围。我的代码如下：

控制器

.controller('lastFMController', function($scope, lastFM) {
    $scope.search = function(artist) {
        lastFM.getSimilar(artist).then(function(result) {
            $scope.artists = result.similarartists.artist;
        }, function(error) {
            $scope.error = error;
        });
    };
});

查看

<form role="form">
<div class="form-group">
    <label for="artist">search for a music artist and see similiar artists</label>
    <input type="text" name="artist" class="form-control" ng-model="artist" placeholder="type an artist's name">
</div>
<button type="submit" class="btn btn-default" ng-click="search(artist)">search</button>
</form>

<hr ng-if="artists" />

<div class="row">
    <div class="col-sm-6 col-md-4 fade in" ng-repeat="artist in artists">
        <h3>{{ artist.name }}</h3>
        <p><a target="_blank" href="http://{{ artist.url }}" class="btn btn-primary" role="button">view on last.fm</a></p>
    </div>
</div>

服务

.factory('lastFM', function($q, $http) {
    var deferred = $q.defer(),
        self = this,
        apiKey = "KEY";

    return {
        getSimilar: function(artist) {
            this.url = 'http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=' + artist + '&api_key=' + apiKey + '&format=json&autocorrect=1';
            this.error = false;

            $http.get(this.url).success(function(data) {
                if (data.error) {
                    deferred.reject(data.error.message);
                }
                else if (!angular.isUndefined(data.similarartists) && angular.isObject(data.similarartists.artist)) {
                deferred.resolve(data);
                }
                else {
                    deferred.reject('Something went wrong');
                }
            });

            return deferred.promise;
        }
    };
});

正如我所说，当我进行初始搜索时，我会看到显示的结果，但所有后续搜索都不会更新范围。我尝试了$ scope。$ apply但它说它已经运行了那个命令。有什么想法吗？

Answer 1

在您的工厂中，您定义了延期。延迟在第一次调用getSimilar时解决，而不是在每次调用时解决（因为工厂是单例）。此外，您不需要延迟，因为$ http会返回一个承诺本身。因此，删除工厂中的延迟初始化，并在getSimilar中返回$ http调用。如果你真的需要额外的延期，那就把它放在getSimilar中。

新请求后AngularJS范围不会更新

1 个答案: