angularjs - 父子 Controller 数据设计

Question

好的，让我们设置一个场景。

场景:
您有一个内容 Controller 。该内容可能是一张照片、一篇博文等等。现在，在此内容的 html 中，您有一个 Comment Controller 。 CommentController 的工作是加载评论，允许评论提交等。然而，这个 Controller 的功能取决于它的父级。毕竟，如果没有 parent ，你在评论什么？

问题:
话虽如此，让我们引入一个问题。 ContentController 需要从服务器请求信息来填充自己，其中一部分是唯一 ID。现在，还有其他方法可以解决此问题，例如使用 url-state 作为唯一 ID，但这是我能想出的最佳方法来解释此问题。

唯一的 id 从服务器加载到 ContentController 中。然后它用这个 ID 和真实的内容填充它的 $scope。另一方面，CommentController 想要加载它自己的资源，但是它的资源加载完全依赖于父 ContentController 的加载数据。由于两个 Controller 同时加载，我们需要一种方法来通知或延迟子 CommentController 的执行。否则，它将尝试从服务器请求关于不存在的唯一内容 ID 的评论。

问题:
这是一个非常基本的问题，有很多显而易见的答案。然而，我的问题是，这样的 Angular 是如何完成的？最适合“Angular 方式”的解决方案是什么。

最明显的方法是简单地拥有一个事件创建者/消费者。 Angular 有多种方法来处理这个问题。比如一个服务，一个$scope.promise = promise ，解决 promise ，$scope.$broadcast ，等等。不过，对我来说，这些事件设计感觉..笨重..它也感觉紧密耦合。我希望我的 ContentController 不会被其中可能存在或不存在的内容所困扰。

另一种方式是 $watch您想要的变量的范围，例如 $scope.$watch('content.uid', function(newValue) {}) .与上述解决方案相比，这感觉更好，耦合更少。仍然不完美……至少对我来说。

我觉得最好的解决方案是我不知道如何实现。我希望 Controller 能够......延迟，如果它(父)正在做一些异步的事情，子 Controller 。我觉得这比事件好，因为它隐含的简单性。它本质上仍然是一个事件广播，但希望语法是干净的，因为只有一个“事件”。它要么不完整，要么完整。虽然，我不确定如果不使用上述事件方法之一，这样的事情是否可行..无论如何都可以实现这一目标吗？

无论如何，自从几周前我开始学习 Angular 以来，这一直是我脑海中一直萦绕的问题。任何有关该主题的见解将不胜感激。

谢谢阅读!

Answer 1

Angular 很想避开事件设计，或者 $watch出于您所描述的目的而使用变量，特别是因为 Angular 使很多事情变得如此干净，但这并不意味着您永远不应该使用它们。

也就是说，我使用 Angular 的次数越多，我就越发现自己将数据操作从 Controller 中提取到服务和工厂中，这些服务和工厂公开了供 Controller 使用的“API”。

例如，假设您有经典的 ListView /详细信息 View 场景，您从列表中选择一个项目，然后在详细信息 View 中显示其信息。

我可能有一个 $resource列表的支持工厂和仅用于管理所选项目的服务:

app.factory('Thing', function($resource) {
  return $resource('/things/:id')
});

app.service('Selected', function() {
  this.thing = null;

  this.select = function(thing) { this.thing = thing; }
  this.clear = function(thing) { this.thing = null; }
});

通过这种方式分解， Controller 只负责协调和响应 View 。是的，我必须 $watch Selected服务，但类似的事情或多或少是不可避免的。但是，它确实使您与直接在数据上观看某些内容分离，例如 uid :

app.controller('List', function($scope, Thing, Selected) {
  $scope.things = Thing.query();

  // assuming something like 'ng-click="select(thing)"' in the view
  $scope.select = function(thing) {
    Selected.select(thing);
  };
});

app.controller('Detail', function($scope, Selected) {
  $scope.Selected = Selected;

  $scope.$watch('Selected.thing', function(thing) {
    $scope.thing = thing;
  });
});

然后，假设您需要为选定的“事物”加载评论，您只需增强您的 Thing具有该功能的工厂:

app.factory('Thing', function($resource) {
  var Thing = $resource('/things/:id');

  Thing.prototype.CommentResource = $resource('/things/:thingId/comments/:id');

  return Thing.
});

然后从您的 Controller 使用该功能。

app.controller('Detail', function($scope, Selected) {
  $scope.Selected = Selected;

  $scope.$watch('Selected.thing', function(thing) {
    $scope.thing = thing;
    $scope.comments = thing.CommentResource.query({id: thing.id});
  });
});

概括

我知道在使用 Angular 时做“恢复到旧方式”的感觉时会感到恶心。

我认为诀窍是从 Controller 中提取除协调之外的所有内容，然后即使您必须使用某些事件或分配一堆 $watches ，您仍然以松散耦合的方式这样做。

这只是我的两分钱，希望它有用。