0

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?

Jordash
  • 2,926
  • 8
  • 38
  • 77
  • 1
    I'd definitely look at using a component then. https://docs.angularjs.org/guide/component. You can pass bindings to the component of which you can keep track off in the builder controller – Prinay Panday Jan 09 '17 at 15:36

2 Answers2

0

Store the data in a factory and have the controller call the factory to do the calculations.

Mark S.
  • 3,849
  • 4
  • 20
  • 22
  • Can you provide any examples? – Jordash Jan 09 '17 at 20:38
  • Here's a rough example I found: http://embed.plnkr.co/E8b5RZ/. The Factory stores all the data and has services/functions to access it. The controllers call the factory functions to add/get data. – Mark S. Jan 09 '17 at 21:56
0

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:

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?

Community
  • 1
  • 1
jusopi
  • 6,791
  • 2
  • 33
  • 44
  • I don't really understand services, or what their purpose or function is – Jordash Jan 09 '17 at 19:28
  • Services are *Singleton* objects that you can inject into other angular entities. You can create a service that has an **add/del** API for your child components. You can also make a **getList** API so that the parent controller can access this as well. Given that you're new to angular, I would take this approach over the directive/component route in my answer. – jusopi Jan 09 '17 at 20:26
  • Is there anyway to get a simple example, that doesn't really make sense. I want to count the total number of valid zip codes across all controllers – Jordash Jan 09 '17 at 20:37