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

我有两个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();

也失败了。

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

当前回答

我想通过指出在控制器之间甚至指令之间共享数据的推荐方式是使用服务(工厂)来回答这个问题，正如已经指出的那样，但我也想提供一个工作的实际示例，说明应该如何做到这一点。

下面是工作活塞:http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

首先，创建你的服务，它将有你的共享数据:

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

然后，简单地将它注入到你的控制器上，并在你的作用域上获取共享数据:

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('SecondCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('MainCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

你也可以为你的指令这样做，它的工作方式是一样的:

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

希望这个实用而干净的答案能对别人有所帮助。

2015-02-21 23:21:33

其他回答

如果你不想做服务，你可以这样做。

var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;

2013-03-01 11:12:35

有两种方法

1)使用get/set服务

2) 美元的范围。$emit('key'， {data: value});//设置该值

 $rootScope.$on('key', function (event, data) {}); // to get the value

2015-11-24 14:23:39

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

$scope.$parent.property = somevalue;

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

2014-05-15 00:19:35

下面的例子展示了如何在兄弟控制器之间传递变量，并在值发生变化时采取行动。

用例示例:在侧栏中有一个过滤器，可以更改另一个视图的内容。

angular.module('myApp', []) .factory('MyService', function() { // private var value = 0; // public return { getValue: function() { return value; }, setValue: function(val) { value = val; } }; }) .controller('Ctrl1', function($scope, $rootScope, MyService) { $scope.update = function() { MyService.setValue($scope.value); $rootScope.$broadcast('increment-value-event'); }; }) .controller('Ctrl2', function($scope, MyService) { $scope.value = MyService.getValue(); $scope.$on('increment-value-event', function() { $scope.value = MyService.getValue(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <h3>Controller 1 Scope</h3> <div ng-controller="Ctrl1"> <input type="text" ng-model="value"/> <button ng-click="update()">Update</button> </div> <hr> <h3>Controller 2 Scope</h3> <div ng-controller="Ctrl2"> Value: {{ value }} </div> </div>

2016-03-24 02:10:08