Question

我正在使用Angular的$ http.get（..），使用google Books API中的API。我希望输入字段存储用户的输入，该输入可以存储在查询字符串中：'/ q = / key = ....'

当我提交搜索字段时，请求成功，但信息未显示。我一直在研究这个问题并且仍然坚持下去。它可能是我的控制器吗？或者我如何设置请求？结果是这样的：

这是代码。

app.controller("HomeController", ['$scope', '$location', 'bookSearch',function($scope, $location, bookSearch){
$scope.website="CoolMark";
$scope.books= '';
$scope.submit= function () {
    if($scope.books === ''){
        alert('Field is empty');
        console.log('not working');
        return false;
    } else {

        $location.path('/search');
        bookSearch($scope.books).success(function(data){
        $scope.searchResult= data;
        }); 
        console.log(typeof $scope.books);

    }
};
}]);

现在服务......

app.factory('bookSearch', ['$http', function($http){
    return function(info){
       return $http.get('https://www.googleapis.com/books/v1/volumes?q='+info+'&orderBy=relevance&filter=ebooks&key=AIzaSyCpWB1q0-kqFEH9f5Sh8xUrXfrhoxAG7wk')
        .success(function(data){
            return data;
        })
        .error(function(err){
            return err;
        });
    };
}]);

有任何建议如何改进此代码？至于视图，这里是：

<div class="feature">
  <div class="container">
    <h3>Return Home</h3>
    <h2 class="text-center">Your Results for: "{{books}}"</h2>
    <div class="book_content">
       <div ng-repeat="item in searchResult.items" id="book-item">
            <img ng-src="{{item.volumeInfo.imageLinks['thumbnail']}}" alt="">
                <h5>{{item.volumeInfo.title}}</h5>
                <p>{{}}</p>
       </div>
    </div>
  </div>
</div>

Answer 1

将$timeout传递给控制器：

app.controller("HomeController", 
    ['$scope', '$location', '$timeout', 'bookSearch',
      function($scope, $location, $timeout, bookSearch) {

并做

$timeout(function() {
    $scope.searchResult= data;
});

许多异步更新发生在摘要周期之外。 $ timeout（）使更新等到下一个摘要周期，以便angular看到更改并更新视图。

更新：更新为工厂代码：

app.factory('bookSearch', ['$http', function($http){
    var factory = {}
    factory.getBooks = function(info){
       return $http.get('[your url]')
    };
    return factory;
}]);

然后进行搜索：

bookSearch.getBooks($scope.books).success(function(data){ ...

$ http获取请求成功但未在视图中显示

1 个答案: