Question

我正在尝试在具有相同父组件的两个组件之间传递数据（简单版本：我有child1组件，child2组件，并且它们都是父组件的子组件）。此外，所有组件都是控制器。

父组件也是一个根组件（它没有任何父组件）所以我认为我必须使用$rootScope？

如果我想将一个var myVar（整数）从child1传递给child2，我想我应该这样做：

child1组件中的

：

$rootScope.$emit('myEvent', vm.myVar);

父组件中的

：

$scope.$on('changeTab', function(){
   console.log('parent', vm.myVar);
});
$scope.$broadcast('changeTab', vm.myVar);

child2组件中的

：

$rootScope.$on('changeTab', function () {
    console.log('child2', vm.myVar);
});

我是新手，并不明白为什么这不起作用，可能没什么大不了，如果有人能帮助我就会欣赏它:) ty！

顺便说一句，我在两个控制台日志中都得到“未定义”，但在child1中正确定义了myVar。

Answer 1

您需要向孩子的父母广播：

$scope.$parent.$broadcast('hi', {
    msg: 'Hello there!'
});

$scope.$broadcast将消息发送到链中，但如果您广播到范围的父级，则父级将向下发送消息，其中包括两个兄弟。

＆＃13;

angular.module('appModule', [])
  .controller('ParentController', [function() {
    this.hello = 'I am the parent';
  }])
  .controller('Child1Controller', ['$scope', function($scope) {
    this.hello = 'I am Child 1';
    var that = this;
    $scope.$on('hi', function(event, data) {
      console.log(data.msg);
      that.hello = data.msg;
    });
  }])
  .controller('Child2Controller', ['$scope', function($scope) {
    this.hello = 'I am Child 2';
    this.sayHello = function(str) {
      $scope.$parent.$broadcast('hi', {
        msg: str
      });
    }
  }]);

angular.bootstrap(window.document, ['appModule'], {
  strictDi: true
});

＆＃13;

div {
  border: 1px dotted #f00;
  padding: 15px;
}

＆＃13;

<div ng-controller="ParentController as parentCtrl">
  <p>{{parentCtrl.hello}}</p>
  <div ng-controller="Child1Controller as child1Ctrl">
    <p>{{child1Ctrl.hello}}</p>
  </div>
  <div ng-controller="Child2Controller as child2Ctrl">
    <p>{{child2Ctrl.hello}}</p>
    <button type="button>" ng-click="child2Ctrl.sayHello('Child 2 is cool')">Say Hello to Child 1</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

＆＃13;

使用$ scope在组件之间传递数据。$ emit（）

1 个答案: