【问题标题】:Why I can't set/get $rootScope?为什么我无法设置/获取 $rootScope?
【发布时间】:2016-02-01 17:35:07
【问题描述】:

我尝试在 .run() 中的 $rootScope 中设置一个值,并尝试在服务中获取它,但它看起来像是未定义的。 .run() 和服务中的其他所有内容都运行良好。

.run(function($ionicPlatform, $translate, $rootScope) {
  document.addEventListener("deviceready",function(){ onDeviceReady($rootScope); }, false);

  function onDeviceReady($rootScope) {
    if(typeof navigator.globalization !== "undefined") {
      navigator.globalization.getPreferredLanguage(function(language) {
        $rootScope.language='en'; //(language.value).split('-')[0];
        $translate.use((language.value).split("-")[0]).then(function(data) {
          console.log("SUCCESS -> " + data);
        }, function(error) {
          console.log("ERROR -> " + error);
        });
      }, null);
    }
  }
})


.service('Webcache', function ($http, $q, apiHost, $rootScope) {
    return {
        getDataBySection: function (section, version, params) {
            var params = params || {};
            var host = apiHost;
            var deferred = $q.defer();
            var start = new Date().getTime();

            params.lang = $rootScope.language;

            $http.get('http://'+ host +'/api/'+ version +'/'+ section, {
                cache: true,
                params: params
            }).success(function (response) {
                deferred.resolve(response);
            }).error(function (response){
                deferred.resolve(false);
            });
            return deferred.promise;
        }
    };
})

【问题讨论】:

  • 我的猜测是deviceReady 事件在您尝试使用它时尚未触发。更好的解决方案是将语言移出范围并进入服务,并使服务使用承诺访问当前语言(因此返回承诺的 getLanguage() 方法。另外,不要使用已弃用的 @ 987654324@,error方法对$http.get的结果,使用then()就可以直接返回response。

标签: angularjs rootscope angularjs-rootscope


【解决方案1】:

您根本不应该绑定到onDeviceReady 事件。 Ionic 为您提供了一种角度兼容的方式来处理它:$ionicPlatform.ready() 它返回一个承诺。使用它会使您的代码看起来像这样:

.run(function($ionicPlatform, $translate, $rootScope, $q, $log) {
   $rootScope.languagePromise = $ionicPlatform.ready()
   .then(function() {
        return $q(function(resolve, reject) {
            if(angular.isDefined(navigator.globalization)) {
                navigator.globalization.getPreferredLanguage(function(language) {
                    $translate.use((language.value).split("-")[0]).then(function(data) {
                        $log.debug("SUCCESS -> " + data);
                        resolve(language);
                    }, function(error) {
                        $log.debug("ERROR -> " + error);
                        reject(error);
                    });
                }, null);
            } else { resolve('en'); }
        });
    });

})

这将一个承诺置于您可以随时使用的范围内,以便立即(如果初始化完成)或当它可用时获取该语言。

.service('Webcache', function ($http, apiHost, $rootScope) {
    return {
        getDataBySection: function (section, version, params) {
            params = params || {};
            var host = apiHost;
            return $rootScope.languagePromise.then(function(language) {
                params.lang = language;
                return $http.get('http://'+ host +'/api/'+ version +'/'+ section, {
                    cache: true,
                    params: params
                }).catch(function (){
                    return false;
                });
            });
        }
    };
})

getDataBySection 直接方法返回等待语言承诺的结果,这又取决于$http 承诺的结果,因此响应数据将像现有代码一样传播回来。

【讨论】:

    【解决方案2】:

    当您尝试执行代码时,设备似乎还没有准备好,您是否尝试过使用 $ionicPlatform.ready ? 像这样:

    .run(appRun);
    appRun.$inject = ['$ionicPlatform', '$translate', '$rootScope'];
    function appRun ($ionicPlatform, $translate, $rootScope) {
        $ionicPlatform.ready(function () {
          if(typeof navigator.globalization !== "undefined") {
            navigator.globalization.getPreferredLanguage(function(language) {
              $rootScope.language='en'; //(language.value).split('-')[0];
              $translate.use((language.value).split("-")[0]).then(function(data) {
                console.log("SUCCESS -> " + data);
              }, function(error) {
                console.log("ERROR -> " + error);
              });
            }, null);
          }
        });
    }
    

    【讨论】:

      猜你喜欢
      • 2014-10-03
      • 2018-12-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-04-18
      • 1970-01-01
      • 2012-05-04
      • 2016-06-19
      相关资源
      最近更新 更多