Question

我创建了2个HTML页面作为Angular Modules。

var app = angular.module("oneApp", []);

app
    .controller(
            'controller-one',
            [
                    '$scope',
                    '$http',
                    function($scope, $http) {...functions..}]);

两种控制器文件有多么不同。但现在我需要这两个控制器来交换一些数据。

我在SO中发现了这个相关的Qeustion：related Thread

当试图将控制器改为那个时......

var app = angular.module("oneApp", ['twoAoo']);

..我得到注射错误。我认为这是因为两个文件都不相关。如何正确交换数据？

Answer 1

要在两个模块之间共享数据，您需要使用服务。

var otherApp = angular.module('otherApp', []);
otherApp.factory('myService', function() {
  var myService = {
    someData: ''
  };
  return myService;
});
otherApp.controller('otherCtrl', function($scope, myService) {
  $scope.shared = myService;
});


var app = angular.module('myApp', ['otherApp']);

app.controller('myCtrl', function($scope, myService) {
  $scope.shared = myService; 
});

本文可以进一步帮助您：https://thinkster.io/a-better-way-to-learn-angularjs/services

Answer 2

正如@Penman所说，你应该使用服务（在这里，我使用了工厂）。

一个非常简单的用例是使用一种记录某些东西的方法来获得服务。然后我们从2个不同的模块使用此服务。

我是这样做的：

<强>的index.html

<body>

  <div ng-app="appOne">
    <div ng-controller="appOneCtrl">
      {{ name }} <button ng-click="log()">Log</button>
    </div>

    <div ng-app="appTwo">
      <div ng-controller="appTwoCtrl">
        {{ name }} <button ng-click="log()">Log</button>
      </div>
    </div>
  </div>

</body>

<强>的script.js

// APP 1
const app1 = angular.module('appOne', ['appTwo']);

app1.controller('appOneCtrl', function($scope, $log, sharedFactory) {
  $scope.name = 'App 1, ctrl 1';

  $scope.log = () => {
    $log.info('Click on log button from appOne');
    sharedFactory.logMeSomething();
  };
});

// -----------------------------------------

// APP 2
const app2 = angular.module('appTwo', []);

app2.controller('appTwoCtrl', function($scope, $log, sharedFactory) {
  $scope.name = 'App 2, ctrl 2';

  $scope.log = () => {
    $log.info('Click on log button from appTwo');
    sharedFactory.logMeSomething();
  };
});

app2.factory('sharedFactory', function($log) {
  return {
    logMeSomething: () => {
      $log.debug('Something logged from sharedFactory !');
    }
  };
});

点击“Log 1”按钮显示：

Click on log button from appOne
Something logged from sharedFactory !

点击“Log 2”按钮显示：

Click on log button from appTwo
Something logged from sharedFactory !

这是我的解决方案的一个有效的Plunkr：

https://plnkr.co/edit/sgOKkh0eh0URPGIP9dZY?p=preview

AngularJS在两个模块之间交换数据

2 个答案: