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

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

也失败了。

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

当前回答

我倾向于使用价值观，乐意任何人讨论为什么这是一个坏主意。

var myApp = angular.module('myApp', []);

myApp.value('sharedProperties', {}); //set to empty object -

然后按服务注入值。

在ctrl1中设置:

myApp.controller('ctrl1', function DemoController(sharedProperties) {
  sharedProperties.carModel = "Galaxy";
  sharedProperties.carMake = "Ford";
});

从ctrl2访问:

myApp.controller('ctrl2', function DemoController(sharedProperties) {
  this.car = sharedProperties.carModel + sharedProperties.carMake; 

});

2016-02-16 16:37:19

其他回答

第二种方法:

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

上面的示例非常有效。我只是做了一个修改，以防我需要管理多个值。我希望这能有所帮助!

app.service('sharedProperties', function () {

    var hashtable = {};

    return {
        setValue: function (key, value) {
            hashtable[key] = value;
        },
        getValue: function (key) {
            return hashtable[key];
        }
    }
});

2014-07-15 16:35:38

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

下面是工作活塞: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

有两种方法

1)使用get/set服务

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

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

2015-11-24 14:23:39