Store a list of controller instances in a different controller in AngularJS

Question

I need an angular example of one controller wrapping the other one. As an example, I want to split some logic between EndpointListController and EndpointController.

EndpointListController will have the means of getting the data from storage, plus some functions applicable on the entire list, EndpointController however, will have the logic for one individual endpoint.

It would be really nice to loop through them with ng-repeat and call the methods directly on the endpoint, like this:

<table ng-controller="EndpointListController">
    <tr ng-repeat="endpoint in endpoints">
      <td><input type="checkbox" ng-click="endpoint.select()"></td>
      <td>{{endpoint.label}}</td>
      <td><span class="label label-info">2014-10-10 23:59</span></td>
      <td><span class="label label-success">success</span></td>
      <td><a href="" class="glyphicon glyphicon-cloud"></a></td>
    </tr>
</table>

currently I'm forced to do something like this:

<tr ng-repeat="endpoint in endpoints" ng-controller="EndpointController" endpoint-data="{{endpoint}}">

Not very elegant ...

Is the thing I'm trying to accomplish even possible with angular? Probably I'm looking at this wrong, if someone can point me in the right direction, it would be greatly appreciated.

You want your endpoint $resource in a factory that manages that data 1) as a singleton that can be injected wherever, and 2) $resource managed CRUD to make that data available. — Dylan
– Dylan, Commented Nov 2, 2014 at 19:21
I think your "endpoint" should be a directive and not a controller — caffeinated.tech
– caffeinated.tech, Commented Nov 2, 2014 at 19:28
just use a directive, ng-repeat already creates a child scope — charlietfl
– charlietfl, Commented Nov 2, 2014 at 19:28
Yes, these are all correct, technically your $resource should be a factory, and a directive should manage your widget like <table end-point-list> and your controller should belong to that directive. Then you have a child directive for each endpoint <tr end-point>. — Dylan
– Dylan, Commented Nov 2, 2014 at 19:40
My 5 cent, usually I use a controller (in a ng-repeat) to filter the data for better performance and it's best practice. Try to check in Batarang — Whisher
– Whisher, Commented Nov 2, 2014 at 20:00

Dylan · Accepted Answer · 2014-11-03 01:19:55Z

1

I like the container directive like this

Here's a plunker

You shorten your widget code down to something like this:

<end-point-list class="table">
  <end-point ng-repeat="ep in endpoints" scope="ep" func="selectEp(scope)">
  </end-point>
</end-point-list>

and you have 2 directives where one requires the other like

app.directive("endPointList", function(..
 return {
   controller:'EndpointCtrl',
//
app.directive("endPoint", function(..
   require:'?^endPointList',

So you have isolate scope on the children but are able to pass anything back to the controller.

I left out the part where this connects to any actual endpoints, not sure if that was part of the question?

edited Nov 3, 2014 at 1:19

answered Nov 2, 2014 at 20:41

Dylan

4,7831 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

alexg Over a year ago

yes please, can you add the parts where it connects the endpoints?

Dylan Over a year ago

huh, Ok, changed the link. Now the endpoints what you trying to connect? Are you making like a list of POST, GET, PUT to display a RESTful interface? like swagger.io?

alexg Over a year ago

no, I'm saving the endpoints to the local storage, but I think I might need to know how to do it with a rest api later, can you show how to do that as part of the answer as well?

alexg Over a year ago

Also, you mentioned a factory, is it to retrieve data and construct resources?

Dylan Over a year ago

Ok I updated the plunker plnkr.co/edit/KPa3nHZ9aXemfKJSiYgZ?p=preview to add a resource per item. A factory, service, provider etc, are all services that work as a singleton among other things, and they are the more common approach to returning a $resource, but in your case you need multiple in 1 repeat so we put them in the directive.

Collectives™ on Stack Overflow

Store a list of controller instances in a different controller in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related