29

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

<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) {
    }]);

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

4

4 回答 4

41

使用服务来实现这一点：

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

var _xxx = {};

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

});

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

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

最后，在 Controller2 中，在该服务的 getXxx() 函数上添加一个 $watch，如下所示：

  $scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
        if (newValue != null) {
            //update Controller2's xxx value
            $scope.xxx= newValue;
        }
    }, true);
于 2013-09-17T17:46:14.503 回答
22

绝对使用服务在控制器之间共享数据，这是一个工作示例。$broadcast 不是要走的路，当有更合适的方式时，您应该避免使用事件系统。使用“服务”、“值”或“常量”（用于全局常量）。

http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp

这是一个带有输入的示例，因此您可以在页面上看到数据镜像：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";
    });
于 2013-09-17T17:50:43.607 回答
16

在一个控制器中，您可以执行以下操作：

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

并在另一个中收听事件：

$scope.$on('eventName', function (event, data) {...});
于 2013-09-17T17:46:28.993 回答
4

你需要使用

 $rootScope.$broadcast()

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

 $scope.$on

这是我前几次分叉的小提琴（我不知道是谁先做的了

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

于 2013-09-17T17:47:29.120 回答