小编典典

为何Angular在这里不随范围更新?

angularjs

我对Angular很陌生,并且使用firebase作为后端。我希望有人可以调试此问题。当我第一次进入我的页面
**www.mywebsite.com/#defaultHash时** ,数据不会加载到DOM中,但在访问另一个哈希链接并返回之后,它确实会加载。

我的控制器是这样的:

/* initialize data */

var fb = new Firebase('https://asdf.firebaseio.com/');

/* set data to automatically update on change */

fb.on('value', function(snapshot) {

  var data = snapshot.val();
  $scope.propertyConfiguration = data.products;
  console.log($scope.propertyConfiguration);
  console.log("Data retrieved");

});

/* save data on button submit */

$scope.saveConfigs = function(){

  var setFBref = new Firebase('https://asdf.firebaseio.com/products');
  setFBref.update($scope.propertyConfiguration);
  console.log("configurations saved!");

};

我有3条哈希路由,分别是“ Shared”,“ Registration”和“ Home”,否则else.redirectTo设置为“
Shared”。(它们都使用此控制器)这是发生的错误:(所有“ links”都是href =“ #hashWhereever“

1)转到 **website.com/#Shared** 或刷新。控制台日志$
scope.propertyConfiguration和“已检索数据”。DOM什么也没显示。

2)单击进入 **website.com/#Registration** ,控制台将正确记录$ scope数据,正确加载了DOM。

3)单击返回 **website.com/#Shared** ,控制台会正确记录$ scope数据,但这次DOM已正确加载。

4)刷新当前正确加载的 **website.com/#Shared** 。DOM元素消失。

由于$
scope.data在这里所有情况下都是正确的,因此Angular是否应确保DOM正确反映了模型?为什么只有当我从另一个链接单击页面时,DOM才能正确加载。

我可以通过添加window.location.hash =“ Shared”来“修复”它,但它会在控制台中引发大量错误。

修正 :(sorta)

函数$ scope。$ apply()强制视图与模型同步。我会自己回答这个问题并关闭它,但是我仍然想知道为什么当我为$
scope正确分配一个值时视图不能正确加载。如果Angular的“脏检查”在可能的情况下更改了模型,是否没有为$ scope超值赋值?


阅读 272

收藏
2020-07-04

共1个答案

小编典典

Angular无法知道您已为$ scope.variable分配了一个值。这里没有魔术。当您运行指令(ng-click / ng-
submit)或Angular内部函数时,它们都会调用$ apply()并触发摘要(检查脏标志和更新例程)。

比$ apply可能更安全的方法是使用$timeout。当前,如果您在Firebase中调用写操作,它可能会同步触发事件侦听器(child_added,child_changed,value等)。这可能会导致您仍然在$apply范围内调用$ apply。如果执行此操作,则会引发错误。$ timeout绕过了这个。

有关摘要和$timeout的主题,请参见此SO问题。

《Angular开发人员指南》中的此文档介绍了编译的工作方式;对于任何认真的Angular开发人员来说,都是非常好的背景知识。

另外,您可以通过使用Angular官方Firebase绑定来节省大量精力,该绑定已经考虑了所有这些实现细节。

模糊相关的注意事项:在不久的将来,Angular将能够利用Object.observe魔术来处理这些更新。

2020-07-04