如何在加载控制器之前实例化变量

Question

我有一个简单的 AngularJS 应用程序。我现在正在尝试在其中实现 L10n* 机制。为此，我有一个服务，它加载一个字符串文件并返回一个键值数组。这些值稍后会放入视图和控制器中。

为了使事情简单明了，我将返回数组分配给 $rootScope 以便每个控制器/视图都可以访问相同的列表。 我是从 angular.module(...).run() 函数

这就是问题的开始——一些控制器可以访问 $rootScope 对象，而其他一些则不能（并返回未定义）。我怀疑这是因为在加载前几个控制器之前没有及时解决承诺。

问题是 - 如何让控制器等待资源加载？

辅助问题 - 为什么 GenericListController 可以使用 $scope.localisation 而 ListController 不能？

服务声明

app.factory("StringsTranslationService", function($http) {

    var getData = function(locale) {

        return $http({method:"GET", url:'public/resources/strings_'+locale+'.txt'}).then(function(result){
            return result.data[0];
        });
    };
    return { getData: getData };
});

将数据从服务加载到 app.js

中的 $rootScope

app.run(function($rootScope,StringsTranslationService) {
    var myDataPromise = StringsTranslationService.getData('en');
    myDataPromise.then(function(result) {
        $rootScope.localisation=result;
    });
});

最后尝试在controller.js中使用：

var app=angular.module('myApp');

app.controller('ListController', function ($scope, $controller){
    console.log($scope.localisation["_NAME_"]);
    angular.extend(this, $controller('GenericListController', {$scope: $scope}));
});

最有趣的事实是，GenericListController 也使用了相同的 $scope.localisation 数组并且它没有问题！

加载顺序为：

1. app.js
2. service.js
3. genericController.js
4. controller.js

Answer 1

您应该直接从服务中读取，而不是将您的结果复制到 $rootScope。

为什么？ Yr $rootScope 存在于整个应用程序生命周期中，它位于所有控制器范围的上方，因此最好保持最轻。

代码：

app.factory("StringsTranslationService", function($http,$q) {

  var StringsTranslationService={};
  var data='';
  var dataReady=false;

  StringsTranslationService.getData = function (locale) {

    var deferred= $q.defer();
    $http({
      method:"GET",
      url:'public/resources/strings_'+locale+'.txt'
    })
    .success(function(result){
      deferred.resolve(result.data[0]);
    })
    .error(function(error){
      deferred.reject(error);
    })
    return deferred.promise;

 };

 return StringsTranslationService;
});

更新你的 app.run

app.run(function(StringsTranslationService){

   //call service & read data
    StringsTranslationService.getData('en')
     .then(function(data){
          StringsTranslationService.data=data;
          StringsTranslationService.dataReady=true;

          //if you really want it add to rootScope
          //$rootScope.localisation=data;
      },
      function(error){
          //handle error here
      })  

});

在你的控制器内部检查数据是否准备好然后读取

app.controller('ListController', function ($scope, StringsTranslationService){

    if(StringsTranslationService.dataReady===false){
      $scope.loading=true;
    }
    else {
       $scope.loading=false;
       $scope.data=StringsTranslationService.data;
    }


});

这样，您只需执行一次调用即可获取数据，并且可以跨应用使用。