Passing $scope to angularJs service/factory a bad idea?

Question

I am working on a project where in there are almost 90+ modules. All modules has a set of input fields and on submit the data should be saved on the server. At any given point in time only one module is active. But there can be open modules in the background.

Submit button is common to all modules, meaning there is only one Submit button throughout the application.

Below picture explains it more.

The prime motto is to keep the individual module changes to minimum and a way to handle certain things(validation, reload etc) in the module from a central place.

The current approach I am planning is,

• Use a 'moduleInit' directive that all module should include in its partial.
• The directive takes the $scope of the module and pass it to a common service/factory (pushConfigService)

• The pushConfigService stores and keep this scope as long as the module is open. Once the scope is destroyed the reference of the same will be removed from the pushConfigService.

• The footer panel is another directive with Submit button in it and calls a save function in the pushConfigService which in turn calls a $scope function in the module to get the form data.

• pushConfigService talks to a bunch of other services like
  dirtyChecker, apiGenerator and finally post data to the server.

Each module will have a set of scope methods defined with some standard names. Eg: _submit, _onSubmit, _cancel, _reload etc.

Another way to handle this, broadcast the submit event and each module listens to the same. There is possibility more actions will be added to the footer panel. So I am little bit hesitant to use the broadcast approach.

My question, Is it a good idea to pass controller scope to a service? Any alternate suggestions?

Thanks in advance.

Answer 1

I believe your core concept is a nice way to handle this setup. Yet I'd suggest to split business logic from UI. I don't have a sample of your code so it is a little hard to build an exact example. Yet since you're using the $scope variable I'm going to assume you're not using a styleguide like or similar to John Papa's. His ways encourage you to not use the $scope and to stay close to actual JavaScript "classes".

How does this make a difference?
Instead of passing the whole scope, you'd be able to just pass the instance of your specific module. For one it is less confusing to you and colleagues to have a concrete interface to operate on instead of having to figure out the composition of given scope. In addition it prevents services from being able to alter the $scope.

The latter could be considered a good practice. Having just the controllers alter the scope make it easy to find the code which alters and manages the UI. From there on the controller could access services to do the actual logic.

Taking it one step further
So passing the class instance instead of scope should be an easy adjustment to the already proposed setup. But please consider the following setup as well.

It seems there are quite some different ways to handle and process the data provided by the module/end user. This logic is now implemented in the controller. One might think some of these modules share similar handling methods (big assumption there). You could move this logic to, so to speak, saving strategies, in services. On activation of a module, this module will set its preferred saving strategy in the service which handles the submit button click. Or more precisely, the save data method which should be called from the onClick handler in the controller.

Now these services/strategies might be shared among controllers, potentially setting up for a better workflow and less duplicated code.