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

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 个哈希路由说“共享”、“注册”和“主页”，而 else.redirectTo 设置为“共享”。（它们都使用这个控制器）这是发生的错误：（所有“链接”都是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" 来“修复”它，但它会在控制台中引发大量错误。

已修复：（排序）

$scope.$apply() 函数强制视图与模型同步。我会自己回答这个问题并关闭它，但我仍然想知道为什么当我正确地为 $scope 赋值时视图没有正确加载。如果 Angular 的“脏检查”在模型有可能发生变化时进行检查，那么为 $scope 赋值不是过分限定吗？

Answer 1

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

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

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

This doc in the Angular Developer Guide covers how compile works;非常适合任何认真的 Angular 开发人员的背景阅读。

此外，您可以使用 official Firebase bindings for Angular 为自己节省大量精力，它已经考虑了所有这些实施细节。

相关说明：在不久的将来，Angular 将能够利用 Object.observe magic 来处理这些更新。