0

I am looking for community advice on how to setup my first angular application.

I have multiple pages with shared functionality: - many filters are shared (location, status, etc) - each page has a grid with some overlap of columns, some specific to each page - each page has the data filtered differently

I created a service that manages the grid portion on each page so that's working great. Where I am struggling is how to bind the filters to the grid. I want to have faceted navigation and when a user clicks on a location I want to update the grid.

I have the following services:

  • CustomerModuleService (handles the grid functionality for all pages)
  • CustomerService (fetches customers via http)

I have the following controllers and their dependencies:

- CustomerFilterCtrl ['$scope', 'customerModuleService']
- PageOneCtrl        ['$scope', 'customerModuleService', 'customerService']
- PageTwoCtrl        ['$scope', 'customerModuleService', 'customerService']

An example of PageOne/PageTwo view is like this:

<div ng-controller="CustomerFilterCtrl">
    <location-filter></location-filter>

    <input type="text" ng-model="test"></input>
</div>

<input type="text" ng-model="test"></input>


<div id="grid1" ui-grid="gridOptions" ui-grid-paging ui-grid-resize-columns external-scopes="gridScope" class="grid" style="height: 700px;">
</div>

I am trying to find ng-model="test" between the two controllers as a proof of concept.

Could someone help me understand how to glue this type of behavior together in angular or possibly give suggests how to do it.

ben
  • 21
  • 3
  • Follow this [link](http://stackoverflow.com/questions/25417162/how-do-i-inject-a-controller-into-another-controller-in-angularjs/25417210#25417210) – mia Jan 11 '15 at 04:56
  • Fat services with skinny controllers http://stackoverflow.com/a/25418541/1803298 – cheekybastard Jan 11 '15 at 05:07
  • Really not clear what the specific issues are. One general rule of thumb to always abide by is having a dot in `ng-model` then you aren't binding primitives that don't have prototypical inheritance. `ng-model="someObj.test"` – charlietfl Jan 11 '15 at 05:09
  • @charlietfl i remembered reading something about having a period not thinking it was too important, but I'll read up more on it to make sure I fully understand it. Sounds important! – ben Jan 11 '15 at 05:25
  • yes it totally is and may be the glue you are missing. As soon as a child scope gets involved , primitives lose 2 way binding. Also sharing primitives across the app – charlietfl Jan 11 '15 at 05:26
  • @charlietfl thanks again...my two-way binding is now working after using a dot in ng-model – ben Jan 11 '15 at 07:02
  • ok..so that was what the original issue was ..cool. glad it helped. you'll remember that one for a long time now – charlietfl Jan 11 '15 at 07:03

0 Answers0