在AngularJS中，不能将JSON响应数据赋值给$scope变量

Can't assign JSON response data to $scope variable in AngularJS

本文关键字：赋值 数据 变量 scope 响应 JSON AngularJS 不能      更新时间：2023-09-26

我试图分配JSON响应数据从BookService.GetBookDetail(item)到我的$scope.detailData，所以我可以把它放在我的detail.html模板。我的问题是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模板。除了{{dataDump}}显示dataDump值"Hello World"外，整个{{detailData.props}}都没有显示任何内容。

<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>

下面是我如何管理我的两个模板:

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不工作。任何建议都会很有帮助。谢谢。

在控制器中注入$rootScope:

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

$rootScope.detailData = result.data

或

将ng-controller从离子内容中移除。(你应该而不是在HTML中定义控制器)

习惯在ui-router中定义controller。

正如您所说，您已经在home.html中定义了控制器以及detail.html，因此控制器正在制作different scopes，因此您无法获得值。

我希望这将为您工作!!

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

要做到这一点，请尝试以下操作:

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

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

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);
}
相关文章：