如何在控制器之间传递变量?

我有两个Angular控制器:

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

我不能在Ctrl2中使用Ctrl1，因为它是未定义的。然而，如果我试图像这样传递它。

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

我得到一个错误。有人知道怎么做吗?

做

Ctrl2.prototype = new Ctrl1();

也失败了。

注意:这些控制器彼此之间不是嵌套的。

当前回答

第二种方法:

angular.module('myApp', [])
  .controller('Ctrl1', ['$scope',
    function($scope) {

    $scope.prop1 = "First";

    $scope.clickFunction = function() {
      $scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
    };
   }
])
.controller('Ctrl2', ['$scope',
    function($scope) {
      $scope.prop2 = "Second";

        $scope.$on("update_Ctrl2_controller", function(event, prop) {
        $scope.prop = prop;

        $scope.both = prop + $scope.prop2; 
    });
  }
])

Html:

<div ng-controller="Ctrl2">
  <p>{{both}}</p>
</div>

<button ng-click="clickFunction()">Click</button>

欲了解更多细节，请参阅plunker:

http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview

2016-03-08 14:18:45

其他回答

除了$rootScope和services，还有一个干净简单的解决方案来扩展angular来添加共享数据:

在控制器中:

angular.sharedProperties = angular.sharedProperties 
    || angular.extend(the-properties-objects);

该属性属于'angular'对象，与作用域分离，可以在作用域和服务中共享。

它的一个好处是你不需要注入对象:它们可以在你定义后的任何地方立即访问!

2015-07-13 17:00:56

难道不能让属性也成为作用域父对象的一部分吗?

$scope.$parent.property = somevalue;

我不是说它是对的，但它确实有效。

2014-05-15 00:19:35

你可以在服务业或工厂里这样做。除了一些核心差异外，它们本质上是一样的。我在thinkster上找到了这个解释。IO是最容易遵循的。简单、扼要、有效。

2014-07-14 07:26:12

——我知道这个答案不适合这个问题，但我希望阅读这个问题并希望处理工厂等服务的人避免这样做的麻烦----

为此，您将需要使用服务或工厂。

服务是在非嵌套控制器之间共享数据的最佳实践。

关于数据共享这个主题的一个非常非常好的注释是如何声明对象。我很不幸，因为我在阅读AngularJS之前就掉进了一个陷阱，我非常沮丧。所以让我帮你避免这个麻烦。

我从“ng-book: the complete book on AngularJS”中读到，AngularJS的ng-models在控制器中创建为裸数据是错误的!

$scope元素应该像这样创建:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // best practice, always use a model
  $scope.someModel = {
    someValue: 'hello computer'
  });

而不是像这样:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // anti-pattern, bare value
  $scope.someBareValue = 'hello computer';
  };
});

这是因为DOM(html文档)建议(最佳实践)将调用包含为

<div ng-model="someModel.someValue"></div>  //NOTICE THE DOT.

这对于嵌套控制器非常有用，如果你想让你的子控制器能够从父控制器....改变一个对象

但在您的情况下，您不需要嵌套作用域，但是有一个类似的方面可以从服务获取对象到控制器。

假设你有一个服务“Factory”，在返回空间中有一个objectA，它包含objectB, objectB又包含objectC。

如果你想从你的控制器GET对象tc到你的作用域，这样说是错误的:

$scope.neededObjectInController = Factory.objectA.objectB.objectC;

那没用的… 相反，只用一个点。

$scope.neededObjectInController = Factory.ObjectA;

然后，在DOM中，您可以从objectA调用objectC。这是与工厂相关的最佳实践，最重要的是，它将有助于避免意外和不可捕捉的错误。

2014-06-24 07:21:45