我对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超值赋值?
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魔术来处理这些更新。