Angular如何不在范围内更新?
我对Angular来说很新,而且我正在使用Firebase作为后端。 我希望有人可以debugging这个问题。 当我第一次去我的页面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个哈希路由说:“共享”,“注册”,和“家”与否则.redirectTo设置为“共享”(他们都使用这个控制器)这里发生的错误:(所有“链接”是href =“ #hashWhereever“)
1)转到website.com/#Shared或只是刷新。 控制台logging$ scope.propertyConfiguration和“Data Retrieved”。 DOM什么也没有显示
2)点击website.com/#Registration ,控制台正确logging$ scope数据,DOM正确加载。
3)回到website.com/#Shared ,控制台正确地logging$范围数据,但这次DOM正确加载。
4)刷新当前正确加载的网站/#分享 。 DOM元素消失。
由于$ scope.data在所有情况下都是正确的,所以Angular不应该确保DOM正确地反映模型吗? 为什么只有当我从另一个链接点击页面时DOM才能正确加载。
我可以通过添加window.location.hash =“Shared”来“修复”它,但是会在控制台中引发大量的错误。
修正 :(sorta)
函数$ scope。$ apply()强制视图与模型同步。 我自己回答这个问题,并closures它,但我仍然想知道为什么视图无法正确加载时,我正确地赋值$ scope。 如果Angular的“脏检查”检查模型是否有可能发生变化,是不是将$ scope的值赋值过分?
Angular没有办法知道你已经为$ scope.variable分配了一个值。 这里没有魔法。 当你运行一个指令(ng-click / ng-submit)或Angular内部函数时,它们都调用$ apply()并触发一个摘要(检查脏标志和更新例程)。
比$ apply更安全的方法是使用$ timeout。 目前,如果您在Firebase中调用写入操作,则可以同步触发事件侦听器(child_added,child_changed,value等)。 这可能会导致您在$ apply范围内调用$ apply。 如果你这样做,就会抛出一个错误。 $超过这个。
看到这个问题多一点关于摘要和$超时的话题。
Angular Developer Guide中的这个文档涵盖了编译如何工作 。 非常棒的背景阅读任何严重的angular开发。
此外,通过使用适用于Angular的官方Firebase绑定 ,您可以节省大量的精力,已将所有这些实现细节考虑在内。
隐约地相关注意:在不久的将来,Angular将能够利用Object.observe魔术来处理这些更新。