在AngularJS中如何从父范围访问多个子范围

Question

I have a parent zone builder controller which has multiple US States that can have several zip codes within each state.

Here is a breakdown of the basics of the format:

BUILDER CONTROLLER

app.controller("builderController", function($scope, $http, $rootScope, $timeout) {
  $scope.zones = [];
});

ZIP CONTROLLER

app.controller("zipController", function($scope, $http, $rootScope, $timeout) {

  $scope.zipCodes = [];

  $scope.addZipCode = function() {
    $scope.zipCodes.push({code: '', distance: '25mi'});
  }
  $scope.removeZipCode = function(index) {
    console.log(index, 'index removing');
    $scope.zipCodes.splice(index, 1);
  }

});

There can be multiple zipControllers in one builderController inside of the builder controller I want to come up with an object or way to iterate through all of the Zip Controllers so that I can calculate a total distance and number of zip codes used, each time one of the child controllers is updated.

What is the most efficient way to do something like this in Angular?

BASIC GOAL

So there could be 4-5 zipController elements in one builderController I want to have a variable in the builderController called something like totalZipCodes which counts the total number of zip codes in each zipCodes array for each controller, How would I do that with a service or factory? Or is there another way?

Answer 1

将数据存储在工厂中，然后让控制器致电工厂进行计算。

Answer 2

a general approach

As @PrinayPanday suggested in his comment, you should use something like a component/directive to do this. I'm prefacing this by saying I will be using the term directive and component interchangeably as I'm not sure of your constraints. I would achieve this by doing the following:

• create a parent directive that defines a directive controller
• create child directives that require the parent directive controller
• when the child directive initializes, it will register itself with the parent controller
• use the parent controller's list of child directive controllers to do what you need to.

You could also use the child's scope to declare a callback on some event (such as $onInit ) rather than defining the directive controllers. I have answered several questions like this. So you might find these answers to be helpful in understanding the above solution more:

• What is the relationship between an Angular 1.X controller and directive
• Angular: Looking for an explanation on custom directive syntax

specific to your needs

As I'm rereading your question, I have to ask if there may not be a better way to solve this by sharing the data in a service/model rather than needing custom directives?