【问题标题】:Handling Page Refresh with AngularJS Service and Views使用 AngularJS 服务和视图处理页面刷新
【发布时间】:2013-07-24 12:55:30
【问题描述】:

我有一个简单的 SPA,它有两个视图:一个列表视图和一个详细视图。我使用一个名为 StateService 的服务在两个控制器之间传递数据。

我正在尝试处理用户刷新浏览器页面的情况——当这种情况发生时,StateService 被重新初始化并且详细视图无法再工作。我想检测何时发生这种情况并将用户返回到列表视图。

这是我的状态服务的简化版本。我的想法是,当我切换到详细视图时,我会将 isInitialized 设置为 true,以便我可以检测到服务何时未正确初始化。

var StateService = function () {
    var isInitialized = false;
};

这是我在控制器的前几行中尝试过的。 StateService 已成功注入控制器。

//always returns [Object], on refresh or navigating from list page
alert(StateService); 
// this next line always returns undefined.  Should be false since I am initializing
// the value to false?
alert(StateService.isInitialized); 
//One of the many combinations I have tried . . .
if (!StateService.isInitialized | StateService.isInitialized == false) {
    $location.path('/');
}

我不知道这是否是我对 javascript 或 Angular 理解的差距,但有什么想法可以让上述代码工作,或者对用户刷新页面时该怎么做有更好的想法?

编辑

使用 nycynik 推荐的 console.log,我看到以下内容:

c {} [状态服务]
未定义 [StateService.isInitialized]

所以当这段代码被命中时,StateService 本身似乎只是一个空对象。我从另一个控制器(处理列表视图的控制器)得到了相同的结果。

如 cmets 中所述,该服务似乎按预期工作。

【问题讨论】:

  • 我对您的 StateService 有点困惑,不应该使用 AngularJS 的服务或工厂函数创建它,以成为真正的 AngularJS 服务。看来您的 StateService 并不是真正的 AngularJS 服务,因此没有正确初始化......
  • 服务本身只是一个函数,并通过 app.service() 绑定到模块/应用程序。我正在这样做,但我没有在这里显示该代码。该服务在其他方面完全正常运行 - 这只是我正在努力解决的问题中描述的问题。
  • 您能否通过 URL 判断您所在的位置并在创建时相应地填充服务?
  • 代替警报,您可以执行console.log(),这样您就可以查看对象的详细信息。但是从显示的代码来看,它应该可以正常工作。问题一定出在其他地方。
  • 我不知道 console.log 做到了。这是太棒了。用调查结果更新我的问题。

标签: javascript angularjs


【解决方案1】:

我认为您的范围界定有问题。 javascript 中的变量具有函数作用域。 isInitialized 仅适用于您的 StateService 函数,因此您无法在 StateService 函数之外获取它。

不确定你是如何将这个东西放入你的控制器的,但也许这些帮助:

如果您使用 Angular 的 module.service() 来使用 StateService 作为构造函数将(新的 StateService)注入到您的控制器中,那么您需要在实例上设置 isInitialized

var StateService = function () {
   this.isInitialized = false;
};

这样 (new StateService).isInitialized === false

如果您只是使用 module.factory() 或其他不使用 new 的东西,那么您需要将您的 isInitialized 值放在您可以实际使用的其他地方。

var StateService = function () {
};
StateService.isInitialized = false

希望对您有所帮助。

【讨论】:

  • 啊哈!关于javascript如何工作的非常简单的误解。感谢您的帮助。
猜你喜欢
  • 2014-02-11
  • 1970-01-01
  • 2011-04-26
  • 2023-04-03
  • 2012-02-15
  • 2016-05-08
  • 2021-05-15
  • 1970-01-01
  • 2014-12-04
相关资源
最近更新 更多