html - 如何使用 $emit 在 angularjs 中与父 Controller 通信

Question

我正在尝试将子值传递给父文本框。下面是父子 Controller :

var myApp = angular.module('myApp',[]);
myApp.controller("ParentController", 
    function($scope,$rootScope) {
      $scope.name = null;
      $scope.$on('someEvent', function(event,data){
      alert(JSON.stringify(data));
      $scope.name = data;
    });
});

myApp.controller("ChildController", 
  function($scope,$rootScope) { 
      $scope.name2 = {name: "MyCtrl"};
      $scope.emit = function(){
      $rootScope.$emit('someEvent', $scope.name2);
  };
});

这是 HTML 代码:

<div ng-controller="ParentController">
    <input type="text" ng-model="name.name"/>
    <div ng-controller="ChildController">
        <input type="text" ng-model="name2.name"/>
        <button ng-click="emit()">
          Emit event
        </button>
    </div>
</div>;

警告消息不起作用？？

Answer 1

您应该在 $scope 上调用 $emit，而不是 $rootScope。 $emit 旨在向上传播事件，从子 Controller 到父 Controller 。如果您想换个方向，可以使用 $broadcast，将事件从父级向下传播到子级。这是一个简单的示例，它将在子 Controller 中随机生成一个数字，并使用 $emit 将其传递给父 Controller 。

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

app.controller('ParentCtrl', function($scope) {
  $scope.$on('changeVar', function(e, nv) {
    $scope.parentVar = nv;
  });
  $scope.parentVar = 5;
});

app.controller('ChildCtrl', function($scope) {
  $scope.emitToParent = function() {
    var newVal = Math.floor(Math.random() * 100) + 1;
    $scope.$emit('changeVar', newVal);
  };
});

有关工作示例，请参阅以下插件:http://plnkr.co/edit/3E5tZgOs8sCXvBRdVq4p