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

问题描述：

我创建了2个HTML页面作为Angular模块。AngularJS交换两个模块之间的数据

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

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

这两个如何不同的控制器文件。但是现在我需要这两个控制器来交换一些数据。

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

当试图在controllor改变到..

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

..我得到一个错误注射。我认为这是因为两个文件都没有关系。如何完成正确的数据交换？

答

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

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

这样做的：var应用= angular.module（ '对myApp'， [ 'otherApp']）;导致我的第二页（它应该使用该服务）崩溃并打破注入错误。就像已经讲过的 – Offset

答

正如@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 !'); 
    } 
    }; 
});

点击 “登录1” 按钮显示：

Click on log button from appOne 
Something logged from sharedFactory !

点击 “日志2” 按钮显示：

Click on log button from appTwo 
Something logged from sharedFactory !

这里是我的解决方案的工作Plunkr：

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

是的，我明白。我试过这个。但是，当将App2作为依赖项添加到App1时，我在控制台中得到了一个模糊的错误消息，并且对于此站点有角度中断。 – Offset

这是理论，我不知道你建立了你的应用程序。它是开源的吗？如果是这样，共享源代码，我可能会看看它。否则，请尝试创建一个重现问题的Plunkr，以便我们有一些工作要做;）。 – Maxime

我想我发现了我的错误。我动态地将我的页面（app）与控制器脚本一起包含在内。这意味着其他应用程序甚至没有加载。这引发了另一个问题。但那是一个不确定的问题:) – Offset

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

相关推荐