Geek asks and answers

Designing Parent and Child Controller Data

Ok, let's set up the script.

Scenario: You have a content controller. It could be a photograph, a blog post, whatever. Now in html for this content you have a Comment controller. CommentController's job is to load comments, resolve comments, etc. However, the functionality of this controller depends on this parent. In the end, if there is no parent, what do you comment on?

Problem: So, with that said, let's introduce the problem. ContentController must request information from the server to populate itself, and part of this is a unique identifier. Now there are other ways to solve this problem, such as using the url state as a unique identifier, but this is the best method I could come up with to explain this problem.

The unique identifier is loaded from the server into the ContentController. Then it fills its $ scope with this identifier and real content. CommentController, on the contrary, wants to load its own resources, but its loading of resources depends on the parent data of the ContentController. Since both controllers load at the same time, we need a way to signal or delay the execution of ChildComController. Otherwise, it will try to request comments from the server about a unique identifier for content that does not exist.

Question: This is a very simple problem, with many obvious answers. My question, however, is how angular how to do this? What would be the solution to this that best matches "angular".

- /. angular . , , $scope.promise = promise, , $scope.$broadcast .. , , .. .. . , ContentController , .

$watch , $scope.$watch('content.uid', function(newValue) {}). . , .. .

, , , . , ... , , () , . , , , . -, , , , , - , "". , . , , - , , - ?

, , , angular . .

!

+5
1

Angular $watch , , , Angular , , .

, Angular, , , "API" .

, , / , .

$resource factory :

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:

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 factory :

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

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

  return Thing.
});

.

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.

, , , , , $watches, .

, , .

+7

More articles:


All Articles