Question

这是一个针对移动应用的小型离子/角度.JS项目。

我正在尝试在与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

Answer 1

由于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内进行此http调用。如果你不需要，那么它只是推迟了呼叫，没有任何好处。如果由于某种原因你需要在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

Answer 2

您可能假设success上的$http.get()方法的返回值将分配给myDocs上的$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;
       });
    }]);

尽管注入，AngularJS中的$ rootScope在Controller中保持UNDEFINED？

2 个答案: