如何将一些数据从一个控制器传递到另一个控制器[重复]

时间:2021-03-25 20:58:38

This question already has an answer here:

这个问题在这里已有答案:

I have the following two peer controllers. There's no parent to these:

我有以下两个对等控制器。这些没有父母:

<div data-ng-controller="Controller1">

</div>

<div data-ng-controller="Controller2">
   The value of xxx is: {{ xxx }}
</div>

angular.module('test')
   .controller('QuestionsStatusController1',
    ['$rootScope', '$scope'
    function ($rootScope, $scope) {
    // How can I set the value of xxx in the HTML that's part of Controller2    
    }]);

angular.module('test')
   .controller('QuestionsStatusController2',
    ['$rootScope', '$scope',
    function ($rootScope, $scope) {
    }]);

In controller 1 I want to update the value of the variable xxx in the HTML that's controlled by Controller2. Is there a way I can do this?

在控制器1中,我想更新由Controller2控制的HTML中的变量xxx的值。有没有办法可以做到这一点?

4 个解决方案

#1


23  

Definitely use a service to share data between controllers, here is a working example. $broadcast is not the way to go, you should avoid using the eventing system when there is a more appropriate way. Use a 'service', 'value' or 'constant' (for global constants).

绝对使用服务在控制器之间共享数据,这是一个工作示例。 $ broadcast不是要走的路,你应该避免在有更合适的方式时使用事件系统。使用'service','value'或'constant'(对于全局常量)。

http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp

http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp

Here is an example with an input so you can see the data mirror on the page: http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU

下面是一个输入示例,您可以在页面上看到数据镜像:http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU

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

testModule
   .controller('QuestionsStatusController1',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;   
    }]);

testModule
   .controller('QuestionsStatusController2',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
      $scope.myservice = myservice;
    }]);

testModule
    .service('myservice', function() {
      this.xxx = "yyy";
    });

#2


37  

Use a service to achieve this:

使用服务来实现这一目标:

MyApp.app.service("xxxSvc", function () {

var _xxx = {};

return {
    getXxx: function () {
        return _xxx;
    },
    setXxx: function (value) {
        _xxx = value;
    }
};

});

Next, inject this service into both controllers.

接下来,将此服务注入两个控制器。

In Controller1, you would need to set the shared xxx value with a call to the service: xxxSvc.setXxx(xxx)

在Controller1中,您需要通过调用服务来设置共享xxx值:xxxSvc.setXxx(xxx)

Finally, in Controller2, add a $watch on this service's getXxx() function like so:

最后,在Controller2中,在此服务的getXxx()函数上添加$ watch,如下所示:

  $scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
        if (newValue != null) {
            //update Controller2's xxx value
            $scope.xxx= newValue;
        }
    }, true);

#3


15  

In one controller, you can do:

在一个控制器中,您可以:

$rootScope.$broadcast('eventName', data);

and listen to the event in another:

并听取另一个事件:

$scope.$on('eventName', function (event, data) {...});

#4


4  

You need to use

你需要使用

 $rootScope.$broadcast()

in the controller that must send datas. And in the one that receive those datas, you use

在必须发送数据的控制器中。在接收这些数据的那个中,你使用

 $scope.$on

Here is a fiddle that i forked a few time ago (I don't know who did it first anymore

这是我前几天分道扬琴的小提琴(我不知道是谁再先做了

http://jsfiddle.net/patxy/RAVFM/

http://jsfiddle.net/patxy/RAVFM/

#1


23  

Definitely use a service to share data between controllers, here is a working example. $broadcast is not the way to go, you should avoid using the eventing system when there is a more appropriate way. Use a 'service', 'value' or 'constant' (for global constants).

绝对使用服务在控制器之间共享数据,这是一个工作示例。 $ broadcast不是要走的路,你应该避免在有更合适的方式时使用事件系统。使用'service','value'或'constant'(对于全局常量)。

http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp

http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp

Here is an example with an input so you can see the data mirror on the page: http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU

下面是一个输入示例,您可以在页面上看到数据镜像:http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU

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

testModule
   .controller('QuestionsStatusController1',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;   
    }]);

testModule
   .controller('QuestionsStatusController2',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
      $scope.myservice = myservice;
    }]);

testModule
    .service('myservice', function() {
      this.xxx = "yyy";
    });

#2


37  

Use a service to achieve this:

使用服务来实现这一目标:

MyApp.app.service("xxxSvc", function () {

var _xxx = {};

return {
    getXxx: function () {
        return _xxx;
    },
    setXxx: function (value) {
        _xxx = value;
    }
};

});

Next, inject this service into both controllers.

接下来,将此服务注入两个控制器。

In Controller1, you would need to set the shared xxx value with a call to the service: xxxSvc.setXxx(xxx)

在Controller1中,您需要通过调用服务来设置共享xxx值:xxxSvc.setXxx(xxx)

Finally, in Controller2, add a $watch on this service's getXxx() function like so:

最后,在Controller2中,在此服务的getXxx()函数上添加$ watch,如下所示:

  $scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
        if (newValue != null) {
            //update Controller2's xxx value
            $scope.xxx= newValue;
        }
    }, true);

#3


15  

In one controller, you can do:

在一个控制器中,您可以:

$rootScope.$broadcast('eventName', data);

and listen to the event in another:

并听取另一个事件:

$scope.$on('eventName', function (event, data) {...});

#4


4  

You need to use

你需要使用

 $rootScope.$broadcast()

in the controller that must send datas. And in the one that receive those datas, you use

在必须发送数据的控制器中。在接收这些数据的那个中,你使用

 $scope.$on

Here is a fiddle that i forked a few time ago (I don't know who did it first anymore

这是我前几天分道扬琴的小提琴(我不知道是谁再先做了

http://jsfiddle.net/patxy/RAVFM/

http://jsfiddle.net/patxy/RAVFM/