Fatal编程技术网
  • angularjs/
  • AngularJS中的$rootScope在控制器中保持未定义，尽管注入？

AngularJS中的$rootScope在控制器中保持未定义，尽管注入？

angularjs

AngularJS中的$rootScope在控制器中保持未定义，尽管注入？,angularjs,controller,ionic,rootscope,Angularjs,Controller,Ionic,Rootscope,这是一个用于移动应用程序的小型ionic/angularJS项目 我试图读取index.html所在文件夹中的JSON文件，然后在运行段中将其分配给$rootScope变量，然后在控制器中检索$rootScope变量值。但它根本不起作用，尽管有服务注入等等 这是我的JSON文件： {"docs":[{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, {"Name":"Ana Tr

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

我试图读取index.html所在文件夹中的JSON文件，然后在运行段中将其分配给$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);
    }])
这是my 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>


离子空白起动器
{{x.Name}
我在这里看到了其他类似的例子，但这仍然不起作用，我一直在用我的头撞墙来实现一个非常简单的事情

非常感谢快速帮助。
这是一个问题：

由于
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
您可能会假设
$http.get（）
上的
success
方法的返回值将分配给
$rootScope
上的
myDocs
属性，但它不是这样工作的
$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;
       });
    }]);
这样做的缺点是您不知道何时设置
$rootScope.myDocs
。OP可能期望
console.log（$rootScope.myDocs）
在其控制器中具有该值，但它不会。@m59。。。是的，我现在明白了。尽管我在成功回调中缓存来自http调用的响应，但在调用完成之前，控制器可能会被调用，这会再次返回未定义的。谢谢你指出这一点。我更新了我的答案以处理此问题：）您仍然存在
$ionicPlatform.ready
的异步问题。在执行控制器功能时，
$rootScope.httpPromise
可能尚未分配。我的回答是这样的。欢迎来到堆栈溢出！请务必查看以下教程：。如果有任何答案可以解决您的问题，请使用复选标记（它将变为绿色）将最有用的答案标记为“已接受”，以表示您的感谢并帮助未来的访问者。这正是我要写的+1另外，我肯定会考虑使用路由器（UI路由器），并解决在视图呈现之前为特定视图加载数据的问题。