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

我试图将JSON响应数据从BookService.GetBookDetail(item)分配给我的$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中的绑定表达式不起作用。任何建议将非常有帮助。谢谢。

最佳答案

将$rootScope注入控制器中：

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

$rootScope.detailData = result.data

要么

从离子含量中除去ng-controller。 （您不应在HTML中定义控制器）

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

正如您说的那样，您已经在home.html和detail.html中定义了控制器，因此这两个控制器都在创建different scopes，因此您没有获得值。

我希望这对您有用！

关于javascript - 无法将JSON响应数据分配给AngularJS中的$ scope变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32713466/