Question

我正在尝试将BookService.GetBookDetail(item)的JSON响应数据分配给我的$scope.detailData，以便我可以将其放在我的detail.html模板中。我的问题是{{detailData}}中的detail.html，由于某种原因，它没有显示我想要的detailData。有人可以告诉我为什么{{detailData}}没有显示任何内容吗？这是我在app.js中的代码：

App.factory("BookService", function($http, $log){
    //var getData = []; 
    return{
            GetBookDetail: function(item){
                return $http.get("http://it-ebooks-api.info/v1/book/"+item);
            }
        }
})

function AppController($scope, $http, $log, BookService){
  $scope.query = '';
  $scope.brand = true;
  $scope.dataDump = "Hello World";

  $scope.loadBooks = function(){
        $scope.loading = true;
        $scope.brand = false;
        $http.get("http://it-ebooks-api.info/v1/search/"+$scope.query)
            .then(function(response){
                $scope.dataBook = response.data.Books;
                $scope.dataSearch = response.data;
                $scope.loading = false;
                $log.info(response.data);
                $scope.query = "";
            });
  }

  $scope.detailBook = function(item){
      console.log(item);
      BookService.GetBookDetail(item).then(function(result){
         $scope.detailData = result.data;
      });
  }

}

App.controller("AppController", ["$scope", "$http", "$log", "BookService", AppController]);

我正在使用离子框架。这是我的detail.html模板。整个{{detailData.props}}没有显示{{dataDump}}的例外，它显示了dataDump值“Hello World”。

<ion-content ng-controller="AppController" class="padding background has-header">
    <ion-list>
        <ion-item class="item-thumbnail-left item-text-wrap">
            <img ng-src="{{ detailData.Image }}" alt="">
            <h2>{{ detailData.Title }}</h2>
            <h2>{{ detailData.Author }}</h2>
            <h3>{{ detailData.SubTitle }} </h3>
            <h4>{{ detailData.Description }}</h4>
            <h4>{{ dataDump }}</h4>
        </ion-item>
    </ion-list>
</ion-content>

以下是我管理2个模板的方法：

App.config(function($stateProvider, $urlRouterProvider){
       $stateProvider
            .state('home',{
                url: '/home',
                templateUrl: 'templates/home.html'
            })
        .state('detail', {
                url: '/detail',
                templateUrl: 'templates/detail.html'
            })

        $urlRouterProvider.otherwise('/home');

    });

我非常想知道为什么detail.html中的绑定表达式无效。任何建议都会非常有帮助。谢谢。

Answer 1

在控制器中注入$rootScope：

将$scope.detailData更改为$rootScope.detailData。

$rootScope.detailData = result.data

OR

从离子内容中删除ng-controller。（你应该不在HTML中定义控制器）

习惯在controller本身定义ui-router。

正如你所说，你已经在home.html和detail.html中定义了控制器，所以控制器都在制作different scopes，因为你没有得到这些值。< / p>

我希望这对你有用!!

Answer 2

$http.get方法返回一个promise。在GetBookDetail方法中，您需要返回此承诺，并在解决后访问数据（就像在$http.get中使用AppController方法时一样）。< / p>

要执行此操作，请尝试以下操作：

    GetBookDetail: function(item){
        return $http.get("http://it-ebooks-api.info/v1/book/"+item);
    }


BookService.GetBookDetail(item)
.then(function(result){
    $scope.detailData = result.data;
});

Answer 3

BookService.GetBookDetail(item);返回一个承诺。做类似的事情：

BookService.GetBookDetail(item).then(function(result){
    $scope.detailData = result.data;
});

然后让您的服务简单地返回：

GetBookDetail: function(item){
     return $http.get("http://it-ebooks-api.info/v1/book/"+item);
}

无法将JSON响应数据分配给AngularJS中的$ scope变量

3 个答案: