0

这是一个用于移动应用的小型 ionic / angularJS 项目。

我正在尝试读取与 index.html 位于同一文件夹中的 JSON 文件，然后将其分配给 RUN 段中的 $rootScope 变量，然后在控制器中检索 $rootScope 变量值。但是，尽管有服务注入等等，但它根本不起作用。

这是我的 JSON 文件：

    {"docs":[{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
             {"Name":"Ana Trujillin Moreo","City":"México D.F.","Country":"Mexico"}
            ]
    }

这是我的 app.js / script.js：

angular.module('starter', ['ionic'])    
    .run(function($ionicPlatform, $rootScope, $http) {
      $ionicPlatform.ready(function() {
        $rootScope.myDocs = $http.get("/customers.json")
                                 .success(function (response) {
                                    return response.docs;
                                  });
      });
    })

    .controller('MyCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
      $scope.myDocs = $rootScope.myDocs;
      //$scope.myDocs = [{'Name': 'a1'},{'Name': 'b1'},{'Name': 'c1'}];
      $scope.myStr = JSON.stringify($rootScope.myDocs);
    }])

这是我的 index.html 中的相关部分：

<body ng-app="starter">    
      <ion-pane>
        <ion-header-bar class="bar-stable">
          <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content ng-controller="MyCtrl">
        <ion-list>
        <ion-item ng-repeat="x in myDocs">
        {{x.Name}}
        </ion-item>
        </ion-list>
        </ion-content>
      </ion-pane>
</body>

我在这里看到了其他类似的例子，但这仍然不起作用，我一直在用头撞墙来实现一个非常简单的事情。

非常感谢快速帮助。这是 Plunker：http ://plnkr.co/edit/zx9ANUzCYVvosZFiPSGY?p=info

4

2 回答 2

2

你有一个时间问题，因为ionicPlatform.ready你没有$http正确使用承诺。

这是一种方法：

.run(function($rootScope, $http) {
  // $http returns a promise, not the value
  $rootScope.docPromise = $http.get("/customers.json")
    .then(function(response) {
      return response.docs;
    });
})

.controller('MyCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
  // you get the value within a .then function on the promise
  $rootScope.docPromise.then(function(result) {
    $scope.myDocs = result;
  })
}])

您不太可能需要在ionicPlatform.ready. 如果您不需要，那么它只会拖延通话而没有任何好处。如果由于某种原因您确实需要在 ready 函数中进行调用，有很多方法可以解决这个问题。这是一个例子：

// inject $q service
var deferred = $q.defer();
$rootScope.docPromise = deferred.promise;
$ionicPlatform.ready(function() {
  $http.get(etc).then(function(response) {
    deferred.resolve(response.docs);
  });
});
// use $rootScope.docPromise as in the previous example
于 2015-10-11T07:00:56.943 回答
0

您可能会假设success方法 on的返回值$http.get()将分配给myDocs属性 on，$rootScope但它不会那样工作。$http.get()是一个异步操作，一旦响应可用，就会调用成功回调。此外，您的成功回调的返回值也未分配，因为它会在将来的某个时间发生。

您需要在ready()下面更新您的喜欢。

   $ionicPlatform.ready(function() {
     /* get will return a promise, cache it in on rootScope for use in controller*/
      $rootScope.httpPromise = $http.get("/customers.json");
   });

在你的控制器中

   .controller('MyCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
      $rootScope.httpPromise.then(function(response){
           $scope.myDocs = response.data.docs;
       });
    }]);
于 2015-10-11T07:03:08.033 回答