37

我说要学习 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);  
   }
  • 它首先会像 Controller- 一样工作。您首先创建控制器，有机会将其置于正确的状态；之后视图被创建。

现在，在 AngularJS 中，我的处理方式如下：

 var self = this;
 onClick = function(){
          self.$locationService.path('approve');       
 }
  • 这就像查看优先。您说要导航到哪个视图/路线，控制器由框架创建。

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

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

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

4

4 回答 4

56

就结构而言，AngularJS 比 MVC 更模块化。

经典 MVC 描述了 3 个简单的层，它们以控制器将模型与视图缝合在一起的方式相互交互（模型不应该直接与视图一起工作，反之亦然）。

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

可能的互动

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

或者

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

……还有更多。由于其多样性，Angular 允许开发人员/设计师选择他们最熟悉的方式并继续进行下去。我推荐阅读AngularJS 开发者指南，在那里你可以找到一些常见问题的有福的解决方案。

于 2013-08-12T16:04:01.837 回答
8

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

于 2013-08-12T15:34:56.017 回答
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/

于 2014-04-03T07:57:33.227 回答
1

如果您希望将简单的字符串数据从一个页面 (page1) 传递到另一个页面 (page2)，一种解决方案是使用传统的 url 参数。使用类似"/page2/param1/param2"的参数调用 page2 路由 url 。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）值。

于 2015-10-20T18:44:06.420 回答