从一个表到另一个表的行添加和删除-AngularJS

Question

我们的团队正在ServiceNow中进行开发，并要求将“正在发送”表中的行添加到“正在接收”表中，并从“正在接收”表中删除行并将其返回到“正在发送”中：

我们已经确定了本练习的附加部分，但是很难使返回部分正常工作。有时它将完全正常。其他时候，当我们删除时，它将取消选中“正在发送”表中的正确条目，但是该条目将保留在“正在接收”表中。

在我们的“发送”表上，它正在接收rootScope，如下所示：

<tbody>
  <tr ng-repeat="item in data.list track by item.sys_id">
    <td ng-if="options.show_checkboxes">
      <input type="checkbox"
             ng-checked="item.isRowSelected"
             ng-click="toggleSelection(item);" >
    </td>
    <td role="cell" class="pointer sp-list-cell"
        ng-class="{selected: item.selected}"
        ng-click="go(item.targetTable, item)"
        ng-repeat="field in ::data.fields_array" data-field="{{::field}}"
        data-th="{{::data.column_labels[field]}}">
     <span ng-if="$first"
           aria-label="${Open record}: {{::item[field].display_value}}"
           role="link" tabindex="0">
       {{::item[field].display_value | limitTo : item[field].limit}}
       {{::item[field].display_value.length > item[field].limit ? '...' : ''}}
     </span>
     <span ng-if="!$first">
       {{::item[field].display_value | limitTo : item[field].limit}}
       {{::item[field].display_value.length > item[field].limit ? '...' : ''}}
      </span>
    </td>
  </tr>
</tbody>

$scope.selectedItems = [];
$scope.toggleSelection = function(item){
    item.isRowSelected = !item.isRowSelected;

    if(item.isRowSelected==false){ 
        $scope.allSelected=false;

        if($scope.selectedItems.indexOf(item.sys_id)!==-1){
            var add = $scope.selectedItems.indexOf(item.sys_id);
            $scope.selectedItems.splice(add,1);
        }
    } else {
        if($scope.selectedItems.indexOf(item.sys_id)==-1){
            $scope.selectedItems.push(
                item
            );
            $rootScope.$broadcast('moveItem', $scope.selectedItems);
        }
    }
}       

$rootScope.$on('deleteItem', function(event, data) {
    $scope.selectedItems = data;
});

在我们的“接收”表小部件中，我们的代码如下所示：

<tbody>
  <tr ng-repeat="item in data.list2 track by item.sys_id">
    <td role="cell" class="pointer sp-list-cell"
        ng-class="{selected: item.selected}"
        ng-click="go(item.targetTable, item)"
        ng-repeat="field in ::data.fields_array"
        data-field="{{::field}}" data-th="{{::data.column_labels[field]}}">
      <span ng-if="$first"
            aria-label="${Open record}: {{::item[field].display_value}}"
            role="link" tabindex="0">
        {{::item[field].display_value | limitTo : item[field].limit}}
        {{::item[field].display_value.length > item[field].limit ? '...' : ''}}
      </span>
      <span ng-if="!$first">
         {{::item[field].display_value | limitTo : item[field].limit}}
         {{::item[field].display_value.length > item[field].limit ? '...' : ''}}
      </span>
    </td>
    <td>
       <a href="javascript:void(0)" ng-click="deleteSelection(item);">
         Remove
       </a>
    </td>
  </tr>
</tbody>

$scope.deleteSelection = function(item){
    item.isRowSelected =false;
    var minus = $scope.data.list2.indexOf(item.sys_id);
    $scope.data.list2.splice(minus, 1);
    $rootScope.$broadcast('deleteItem', $scope.data.list2);
}

$rootScope.$on('moveItem', function(event, data) {
    $scope.data.list2 = data;
    $scope.data.row_count = data.length;
});

Answer 1

为了避免内存泄漏，请使用$scope.$on：

̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶.̶$̶o̶n̶(̶'̶d̶e̶l̶e̶t̶e̶I̶t̶e̶m̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶e̶v̶e̶n̶t̶,̶ ̶d̶a̶t̶a̶)̶ ̶{̶
$scope.$on('deleteItem', function(event, data) {
    $scope.selectedItems = data;
});

为了避免注入$rootScope，请使用$scope.$root：

̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶.̶$̶b̶r̶o̶a̶d̶c̶a̶s̶t̶(̶'̶m̶o̶v̶e̶I̶t̶e̶m̶'̶,̶ ̶$̶s̶c̶o̶p̶e̶.̶s̶e̶l̶e̶c̶t̶e̶d̶I̶t̶e̶m̶s̶)̶;̶
$scope.$root.$broadcast('moveItem', $scope.selectedItems);