时间戳

首页 > 解决方案 > 从一个表向另一个表添加和删除行 - AngularJS

angularjs - 从一个表向另一个表添加和删除行 - AngularJS

问题描述

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

在此处输入图像描述

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

在我们的“Sending”表上，它正在接收这样的 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;
});

标签： angularjsservicenowangularjs-rootscope

解决方案

避免$rootScope.$on——它有内存泄漏的风险

在其操作过程中，AngularJS 添加和删除 DOM 及其附加的指令和控制器。$rootScope.$on删除指令或控制器时，不会自动删除由添加的侦听器函数。这可能会导致内存泄漏和不良行为。

为避免内存泄漏，请将事件侦听器添加到$scope控制器，而不是$rootScope：

̶$̶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);

推荐阅读