Question

我对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条哈希路线说＆＃34;共享＆＃34;，＆＃34;注册＆＃34;和＆＃34; Home＆＃34;使用otherwise.redirectTo设置为＆＃34;共享＆＃34;。（他们都使用此控制器）以下是发生的错误:(所有＆＃34;链接＆＃34;是href =＆＃34;＃ hashWhereever＆＃34）

1）转到 website.com/#Shared 或刷新。控制台记录$ scope.propertyConfiguration和＆＃34; Data Retrieved＆＃34;。 DOM没有显示任何内容。

2）点击 website.com/#Registration ，控制台正确记录$ scope数据，正确加载DOM。

3）点击返回 website.com/#Shared ，控制台正确记录$ scope数据，但这次DOM正确加载。

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

由于$ scope.data在这里的所有情况下都是正确的，因此不应该确保DOM正确反映模型吗？为什么只有当我从另一个链接点击页面时才正确加载DOM。

我可以＆＃34;修复＆＃34;它通过添加window.location.hash =＆＃34;共享＆＃34;但它在控制台中引发了大量错误。

固定 :(几分）

函数$ scope。$ apply（）强制视图与模型同步。我自己回答这个问题然后关闭它，但我仍然想知道为什么在我正确地为$ scope分配值时视图无法正确加载。如果Angular＆＃34;脏检查＆＃34;检查模型是否有可能更改，是否为$ scope overqualify分配值？

Answer 1

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

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

有关摘要和$ timeout主题的更多信息，请参阅this SO Question。

This doc in the Angular Developer Guide covers how compile works;非常好的背景读取任何严重的Angular开发。

此外，您可以使用official Firebase bindings for Angular来节省大量精力，Object.observe magic已经考虑了所有这些实施细节。

模糊相关注释：在不久的将来，Angular将能够利用{{3}}来处理这些更新。

为什么Angular不会在这里更新范围？

1 个答案: