AngularJS模块/控制器间数据传递问题求助

Hey Alberto, let's sort out that $injector error you're hitting when trying to pass an object between your two AngularJS modules. The root issue is almost certainly related to how your modules and services are connected—let's break it down step by step.

Why You're Seeing the $injector Error #

Angular's injector throws this error when it can't locate the service you're trying to use. In your case, this is probably happening because:

• Your second module isn't dependent on the module that contains your sharedData service (right now it's in AppIndex), so it has no way to access the service.
• Or, you're not using a safe injection syntax that works even with minified code (though the first issue is far more likely here).

The Best Fix: Use a Shared Common Module #

Instead of keeping the shared service in one of your business modules, it's cleaner to put it in a separate, reusable module. This way both of your main modules can depend on it without tight coupling.

Step 1: Create a Shared Module for Your Service #

First, make a dedicated module to hold your shared data service:

// Create a standalone shared module
var sharedModule = angular.module('SharedModule', []);

// Define your shared data service here
sharedModule.service('sharedData', function () {
  this.data = {};

  // Use angular.copy to avoid unintended reference issues
  this.setData = function (newData) {
    this.data = angular.copy(newData);
  };

  this.getData = function () {
    return this.data;
  };
});

Step 2: Update Your First Module to Depend on the Shared Module #

Modify your AppIndex module to include SharedModule as a dependency:

var appIndex = angular.module("AppIndex", [
  'datatables', 
  'datatables.bootstrap', 
  'ui.select',
  'SharedModule' // Add the shared module here
]);

// Example controller using the shared service
appIndex.controller('IndexController', ['$scope', 'sharedData', function ($scope, sharedData) {
  // Set some sample data to share
  var exampleObj = { id: 123, name: "Sample Object" };
  sharedData.setData(exampleObj);
}]);

Step 3: Update Your Second Module to Depend on the Shared Module #

This is the critical step you were probably missing! Make sure your second module also lists SharedModule as a dependency, then inject the service into its controller:

// Replace with your actual second module name
var appSecond = angular.module("AppSecond", ['SharedModule']);

// Example controller for your second module
appSecond.controller('SecondController', ['$scope', 'sharedData', function ($scope, sharedData) {
  // Retrieve the shared data
  $scope.passedObject = sharedData.getData();
}]);

Key Notes to Avoid Future Issues #

• Always use safe injection syntax: The array syntax (like ['$scope', 'sharedData', function(...) {...}]) or the $inject property ensures your code works even when minified (minifiers often rename function parameters, which breaks Angular's implicit injection).
• Use angular.copy: When setting data in the service, using angular.copy prevents both modules from referencing the same object directly—this avoids unintended side effects where changes in one module affect the other unexpectedly.

内容的提问来源于stack exchange，提问作者Alberto