Question

我说要学习AngularJS，来自很多不同的MV *框架。我喜欢这个框架，但是我在控制器之间传递数据时遇到了麻烦。

假设我有一个带有一些输入（input.html）和控制器的屏幕，让我们说InputCtrl。
此视图上有一个按钮，可以将您带到另一个屏幕，让我们说使用控制器ApproveCtrl批准（approve.html）。
此ApproveCtrl需要来自InputCtrl的数据。在更大的应用程序中，这似乎是一种非常常见的情况。

在我之前的MV *框架中，这将像（伪代码）一样处理：

   var self = this;
   onClick = function() {
          var approveCtrl = DI.resolve(ApproveCtrl);
          approveCtrl.property1 = self.property1;
          approveCtrl.property1 = self.property2;
          self.router.show(approveCtrl);  
   }

它会像控制器一样工作。您首先创建控制器，有机会将其置于正确的状态;然后创建视图。

现在，在AngularJS中，我正在处理它：

 var self = this;
 onClick = function(){
          self.$locationService.path('approve');       
 }

这就像View-first一样。您说要导航到哪个视图/路由，Controller由框架创建。

我发现很难控制创建的Controller的状态并将数据传递给它。我已经看过并尝试过以下方法，但在我看来，所有这些都有自己的问题：

将共享服务注入InputCtrl＆amp; ApproveCtrl并将所有数据放在此服务上共享
- 这看起来像是一个肮脏的解决方法;共享服务中的状态变为全局状态，而我只需要它将数据传递给ApproveCtrl
- 此共享服务的生命周期比我需要的时间长 - 只是将数据传递给ApproveCtrl
传递$ routeParams中的数据
- 传递大量参数时，这会变得非常混乱
使用$ scope事件
- 从概念上讲，这不是我会使用事件的东西 - 我只需要将数据传递给ApproveCtrl，没有任何事件 - ish
- 这很麻烦;我必须首先向父母发送一个事件，然后将其广播给它的孩子们

我在这里遗漏了什么吗？我创造了太多小型控制器吗？我是否试图在这里过多地保留其他框架的习惯？

Answer 1

在结构方面，AngularJS比MVC更模块化。

经典MVC描述了3个简单的图层，这些图层以这样的方式相互交互：控制器使用View缝合模型（模型不应该直接使用View，反之亦然）。

在Angular中，您可以拥有多个，一些完全可选的实体，这些实体可以通过多种方式相互交互，例如：

Possible Interactions

这就是为什么有多种方式在不同实体之间传递数据。你可以：

使用difference between this and $scope
发送讯息using events
发送消息using shared system（注意：上面的链接相同，答案显示了这两种技术）

或

使用AJAX后端发送消息
使用外部系统发送消息（例如MQ）

......还有更多。由于其多样性，Angular允许开发人员/设计师选择他们最舒适的方式并继续进行。我建议您阅读AngularJS Developer Guide，以便找到解决某些常见问题的祝福解决方案。

Answer 2

如果您的目的是简单地在两个视图之间共享数据，那么服务可能就是您的选择。如果您对持久存储到数据存储感兴趣，可能需要考虑某种后端服务，例如REST API。看看这个$ http服务。

Answer 3

即使XLII给出了完整的回复，我也发现本教程使用了一项服务。它非常有趣，是使用2路绑定属性在控制器之间共享数据的简单方法：https://egghead.io/lessons/angularjs-sharing-data-between-controllers

我现在还没有使用它。

否则，还有其他方式，基于事件：http://www.objectpartners.com/2013/08/21/using-services-and-messages-to-share-data-between-controllers-in-angularjs/

Answer 4

如果您希望将简单的字符串数据从一个页面（第1页）传递到另一个页面（第2页），则一种解决方案是使用传统的URL参数。使用“/ page2 / param1 / param2”等参数调用page2路径网址。 page2的控制器将在“ routeParams ”中接收参数。您将能够以 routeParams.param1 和 routeParams.param2 访问参数。以下代码摘自：How to get the url parameters using angular js

从page1的控制器（js）或其html中的url调用page2路由，参数为：

"/page2/param1/param2"

第2页路线：

$routeProvider.when('/page2/:param1/:param2', {
    templateUrl: 'pages/page2.html',    
    controller: 'Page2Ctrl'
});

控制器：

.controller('Page2Ctrl', ['$scope','$routeParams', function($scope, $routeParams) {
  $scope.param1 = $routeParams.param1;
  $scope.param2 = $routeParams.param2;
  ...
}]);

现在您也可以访问page2的html /模板中的参数（param1和param2）值。

在控制器之间传递数据

4 个答案: