亲子控制器数据设计 [英] Parent and Child Controller Data Design

问题描述

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

Okay, lets set up a scenario.

场景:您有一个内容控制器.该内容可能是照片，博客文章等.现在，在此内容的html中，您有了一个Comment控制器.CommentController的工作是加载评论，允许评论提交等.但是，此控制器的功能取决于其父级.毕竟，如果没有父母，您对此有何评论?

Scenario: You have a Content controller. This content might be a photo, a blog post, whatever. Now, within html for this content, you have a Comment controller. The CommentController's job is to load comments, allow comment submissions, etc. However, the functionality of this controller depends on it's parent. After all, if there is no parent, what are you commenting on?

问题:所以说，让我们介绍一个问题.ContentController需要从服务器请求信息以填充自身，其中一部分是唯一ID.现在，还有其他方法可以解决此问题，例如使用url-state作为唯一ID，但这是我可以提出的最好的方法来解释此问题.

Problem: So with that said, lets introduce a problem. The ContentController needs to request information from the server to populate itself, and part of this is a Unique ID. Now, there are other ways about this problem, such as using the url-state as the unique ID, but this is the best method i could come up with to explain this problem.

唯一ID从服务器加载到ContentController中.然后，它使用此ID和实际内容填充其$ scope.另一方面，CommentController希望加载其自己的资源，但是其资源加载全部取决于父ContentController的加载数据.由于两个控制器都同时加载，因此我们需要一种信号通知或延迟子CommentController的执行的执行.否则，它将尝试从服务器请求有关不存在的唯一内容ID的评论.

The unique id is loaded from the server into the ContentController. It then populates its $scope with this ID, and the real content. The CommentController on the otherhand, wants to load it's own resources, but its resource loading is all dependant upon the parent ContentController's loaded data. Since both controllers load at the same time, we need a way to signal, or delay, the execution of the child CommentController's execution. Otherwise it will try to request comments from the server about a unique-content-id that does not exist.

问题:这是一个非常基本的问题，有很多明显的答案.但是，我的问题是，像这样的角度怎么做?对此最适合角度方式"的解决方案是什么.

Question: This is a very basic problem, with many obvious answers. My question however, is how would angular like this done? What would the solution be to this that best fits the "angular way".

最明显的方法是简单地创建一个事件创建者/消费者.Angular有多种方法可以解决这个问题.例如服务， $ scope.promise = promise ，可解决的promise， $ scope.$ broadcast 等.尽管如此，对我而言，这些事件设计却让人感到..笨拙的..它也感觉紧密相连.我希望我的ContentController不会因为其中可能包含的内容而陷入困境.

The most obvious way is to simply have an event creator/consumer. Angular has multiple ways to deal with this. Such as a service, a $scope.promise = promise, a resolve promise, $scope.$broadcast, and etc. To me though, these sort of evented designs feel.. clunky.. it also feels tightly coupled. I would prefer my ContentController not be bogged down by what may or may not be within it.

另一种方法是 $ watch 您想要的变量的作用域，例如 $ scope.$ watch('content.uid'，function(newValue){}).与上面的解决方案相比，这感觉更好，耦合度更低.至少还是对我来说还不完美.

another way would be to $watch the scope for the variable you want, such as $scope.$watch('content.uid', function(newValue) {}). This feels better, and less coupled than the above solution. Still not perfect though.. to me at least.

我觉得最好的解决方案是我不知道如何实现的解决方案.我希望一个控制器能够延迟子控制器，如果它(父级)正在执行异步操作.我感觉这比事件要好，因为它暗示了 的简单性.从本质上讲，它仍然是一个事件广播，但由于只有一个事件"，因此希望语法是干净的.它是不完整的或完整的.但是，我不确定如果不使用上述事件方法之一，是否还可以实现类似的功能.是否有办法实现这一目标?

I feel like the best solution would be one that i do not know how to achieve. I would like a controller to be able to .. delay, children controllers if it (the parent) is doing something that is asynchronous. I feel this is better than an event, because of it's implied simplicity. It is still essentially an event broadcast, but hopefully the syntax would be clean, due to the fact that there is only a single "event". It is either incomplete or complete. Though, i'm not sure if anything like this is even possible without using one of the above evented methods.. would there be anyway to achieve this?

无论如何，自从几周前我开始学习Angular以来，这个问题一直困扰着我.任何关于该主题的见识将不胜感激.

Anyway, this has been an issue that has been rolling around in my head since i started learning Angular a couple weeks ago. Any insight on the subject would be greatly appreciated.

感谢阅读！

推荐答案

使用Angular避开事件设计或出于您所描述的目的而对变量进行 $ watch 诱人因为Angular可以使很多东西变得如此干净，但这并不意味着您永远都不要使用它们.

It's tempting with Angular to eschew evented designs, or the $watching of a variable for purposes like you're describing, especially because Angular makes so many things so clean, but that doesn't mean you shouldn't ever use them.

也就是说，我使用Angular的次数越多，我发现自己将数据操纵从控制器中拉到服务和工厂中的程度就越多，这些服务和工厂公开了供控制器使用的"API".

That said, the more I use Angular, the more I find myself pulling data manipulation out of the controllers and into services and factories that expose "API"s for the controllers to use.

例如，假设您具有经典的列表视图/详细信息视图方案，即从列表中选择一个项目，然后在详细信息视图中显示其信息.

For example, say you have the classic list view/detail view scenario, where you select an item from a list and then display its information in the detail view.

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

I might have a $resource backed factory for the list and a service just for managing the selected item:

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; }
});

通过以这种方式分解，控制器仅负责协调并响应视图.是的，我必须 $ watch Selected 服务，但这是不可避免的.但是，它确实使您脱离了直接在数据上查看内容的能力，例如 uid :

By breaking things up this way, the controllers are only responsible for coordination and responding to the view. Yeah, I have to $watch the Selected services, but something like that's more or less unavoidable. It does, however, decouple you from watching something directly on your data, like a 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 工厂:

And then, supposing, you need to load comments for the selected 'thing', you just enhance your Thing factory with that functionality:

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

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

  return Thing.
});

然后从您的控制器中使用该功能.

And then use that functionality from your 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时进行还原为旧方式"时会感觉到刺痛.

Summary

I know the icky feeling that you can get when doing what feels like "reverting to older way" when using Angular.

我认为诀窍是从控制器中抽出除协调以外的所有内容，然后即使当您必须使用一些事件或分配一堆 $ watches 时，您仍然会这样做一种松耦合的方式.

I think the trick is to pull out everything but coordination from your controller, and then even when you have to use some events or assign a bunch of $watches, you're still doing so in a loosely-coupled way.

那只是我的两分钱，希望它有用.

That's just my two cents, hope it's useful.

这篇关于亲子控制器数据设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！