$http 获取请求成功但视图中没有显示

Question

我正在使用来自 google Books API 的 API 使用 Angular 的 $http.get(..)。我希望输入字段存储可以存储在查询字符串中的用户输入：'/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){ ...