0

I have a search web app made with AngularJS, which includes two angular modules: the search-keyword-input module and the search-action module.

The first search-keyword-input module has suggest functionality, form validation functionality, and so on. The search-action module's functionality is requesting data and showing sortable results in a table. So each module has its own controller and directive.

Here's the problem: the reason I modularize is, I want modules that could be reused and decoupled. But in this app, the keyword model value in the search-keyword-input module has to be passed into the search action module (the search-action module has to know what keyword to use to perform the search). So how can I pass the value between modules? How can they communicate without being coupled?

I have figured out a way like adding a parent controller and global $scope value:

<div ng-controller="globalController">
    <div ng-controller="keywordController"></div>
    <div ng-controller="searchController"></div>
</div>

So the search-keyword module could set the keyword value on the globalController's $scope and the search-action controller could also obtain that keyword value from the globalController. But I think this makes the modularization meaningless because they are coupled together. What else can I do?

VLS
  • 2,306
  • 4
  • 22
  • 17
hh54188
  • 14,887
  • 32
  • 113
  • 184
  • aren't these *already* coupled, just by virtue of the fact that one is reliant upon the other? Does the `search` module already have some way to search without a `keyword`? – Claies Aug 18 '15 at 01:54

1 Answers1

1

Your best bet is to create a custom service that can be shared by both controllers, and also used individually, rather than polluting the parent scope.

ricick
  • 5,694
  • 3
  • 25
  • 37