Question

我正在尝试将子值传递给父文本框。下面是父子控制器：

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

您应该在$emit而不是$scope上致电$rootScope。 $emit旨在将事件从子控制器向上传播到父控制器。如果您想朝另一个方向发展，则可以使用$broadcast将事件从父级传播到子级。这是一个简单的示例，它将在子控制器中随机生成一个数字，并使用$emit将其传递给父控制器。

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

如何使用$ emit在angularjs中通信父控制器

1 个答案: