使用$emit和$on在AngularJS中处理两个控制器

21 浏览
0 Comments

使用$emit和$on在AngularJS中处理两个控制器

我想定义CtrlOne（父级）和CtrlTwo（子级）之间的通信。在这个主题中，解决方法是定义scope: $scope，但我不能这样做，因为我在我的模态窗口中使用了一个服务。\n在CtrlOne中，我有一个带有项目的表格列表。这些项目是我从执行HTTP请求的服务中获取的。当我点击一行时，所选项目将显示在使用CtrlTwo的模态窗口中。当我进行更改时，表格将自动更新（双向数据绑定）。但是当我点击重置按钮时，只有模态窗口中的表单会被清除。\nCtrlOne的视图：\n

var arrIndex;
$rootScope.$on('reset', function (evt, item) {
  arrIndex = item.items;
  $log.info('arrIndex:', arrIndex.Id);
  if ($scope.list.indexOf(arrIndex)) {
     $scope.list[arrIndex];
  } else {
     $.log.error('false');
  }
});

\nId在WebAPI（服务器端）中定义，并且会自动递增。\nCtrlTwo：\n

//重置按钮
$scope.reset = function () {
  $scope.selected = angular.copy($scope.copyItem);
  $scope.$emit('reset', { items: $scope.selected });
}
//取消按钮
$scope.cancel = function () {
  $modalInstance.dismiss('cancel');
}

\nCtrlTwo的视图：\n

//模态窗口表单

\n我该如何解决这个问题？

0

2 答案

0 Comments

问题的原因是$emit发送的事件在作用域层次结构中向上发送，而应该使用$rootScope来发送。解决方法是使用$rootScope.$emit来代替$scope.$emit。

下面是解决问题的方法：

$rootScope.$emit('reset', ...)

另一个解决方法是使用$rootScope.$broadcast来代替$rootScope.$emit，因为$broadcast会在整个作用域层次结构中向下发送事件。

问题似乎不在于使用$emit还是$broadcast，而是在于上传CtrlTwo的表格列表时，当我删除或创建项目时，点击重置或取消时，更改不会停止和保留。

文章整理如下：

使用$emit和$on在AngularJS中处理两个控制器之间的通信

在AngularJS中，我们经常需要在不同的控制器之间进行通信。一种常见的方式是使用$emit和$on来发送和接收事件。但有时候我们可能会遇到一些问题，导致通信失败。

在处理这个问题时，我尝试使用$scope.$emit来发送事件，但发现它并不起作用。经过进一步的调查，我发现应该在$rootScope上使用$emit来发送事件，而不是在$scope上使用。

下面是解决问题的代码示例：

$rootScope.$emit('reset', ...)

另一种解决方法是使用$rootScope.$broadcast来发送事件。$broadcast会在整个作用域层次结构中向下发送事件，这可能更适合你的需求。

除了问题的原因和解决方法，我还注意到问题并不在于使用$emit还是$broadcast。而是在上传CtrlTwo的表格列表时，当我删除或创建项目时，点击重置或取消时，更改不会停止和保留。

通过使用正确的事件发送方式，并确保在适当的时候监听事件，我成功地解决了这个问题。现在，当我点击重置或取消时，更改会停止并保留。

在AngularJS中，使用$emit和$on可以方便地进行控制器之间的通信。当遇到通信失败的问题时，我们应该检查是否使用了正确的事件发送方式，并确保在适当的时候监听事件。通过这种方式，我们可以成功地解决通信问题，并确保应用的正常运行。

0
0 Comments

问题的出现原因是在AngularJS中，当使用$emit和$on来在两个控制器之间进行通信时，可能会遇到一些问题。解决方法是使用一个服务来处理数据，而不是使用事件广播。

在这个解决方案中，创建了一个名为"myService"的服务。该服务包含了一些方法来处理数据，如init、setEditItem、getEditItem、saveEditItem和resetEditItem等。其中，init方法用于初始化items数组，setEditItem方法用于设置要编辑的item，getEditItem方法用于获取要编辑的item，saveEditItem方法用于保存编辑后的item，resetEditItem方法用于重置编辑的item。

在Controller1中，通过调用myService的setEditItem方法来设置要编辑的item。在Controller2中，通过调用myService的getEditItem方法来获取要编辑的item。

解决方法的代码如下：

angular('myApp').factory('myService', myService);
myService.$inject = ['$http'];
function myService ($http) {
   var items = [];
   var editIndex;
   var editItem = {};
   return {
     init: function() { return $http.get(...); },
     setEditItem: function(i) { 
        editIndex = i;
        angular.extend(editItem, items[editIndex]);
     },
     getEditItem: function() { return items[editIndex]; },
     saveEditItem: function() { angular.extend(items[editIndex], editItem); },
     resetEditItem: function() { angular.extend(editItem, items[editIndex]); }
   };
});
$scope.open = function (index) {
  myService.setEditItem(index);      
  modalService.openDialog();
}
angular('myApp').controller('MyController2', MyController2);
MyController2.$inject = ['myService'];
function MyController(myService)
{
   var me = this;
   me.editItem = myService.getEditItem();
   me.resetItem = myService.resetEditItem;
   me.saveItem = myService.saveEditItem;
}

这样，通过使用服务来处理数据，可以在两个控制器之间实现通信，并解决了在使用$emit和$on时可能出现的问题。

0