angularjs – 父和子控制器数据设计

也就是说,我使用Angular的次数越多,我就越发现自己将数据操作从控制器中拉出来,并进入为控制器公开“API”的服务和工厂.

例如,假设您有经典列表视图/详细信息视图方案,您可以从列表中选择项目,然后在详细信息视图中显示其信息.

我可能有一个$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; }
});

通过这种方式解决问题,控制器只负责协调和响应视图.是的,我必须观看选定的服务,但这或多或少是不可避免的.但是,它会使您无法直接在数据上观看某些内容,例如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',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.
});

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

app.controller('Detail',function(thing) {
    $scope.thing = thing;
    $scope.comments = thing.CommentResource.query({id: thing.id});
  });
});

摘要

我知道在使用Angular时感觉像“恢复到旧方式”时可以得到的icky感觉.

我认为诀窍是从你的控制器中取出一切而不是协调,然后即使你必须使用一些事件或分配一堆$watch,你仍然以松散耦合的方式这样做.

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