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

Question

我正在尝试将来自 BookService.GetBookDetail(item) 的 JSON 响应数据分配给我的 $scope.detailData 以便我可以将其放入我的 详细信息中.html 模板。我的问题是 detail.html 中的 {{detailData}} 由于某种原因没有显示我想要的 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]);

我正在使用 ionic 框架。这是我的 detail.html 模板。整个 {{detailData.props}} 除了显示 dataDump 值“Hello World”的 {{dataDump}} 外什么都没有显示。

<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 中的绑定(bind)表达式不起作用。任何建议都会非常有帮助。谢谢。

Answer 1

在 Controller 中注入(inject)$rootScope:

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

$rootScope.detailData = result.data

或

从 ion-content 中移除 ng-controller。 (您不应该在 HTML 中定义 Controller )

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

正如您所说，您已经在 home.html 和 detail.html 中定义了 Controller ，因此这两个 Controller 正在制作 不同的范围 作为结果你没有得到这些值。

我希望这对你有用!!