Question

我可能误解了一些事情，但这是我的问题on plunker。

无论如何，我把相关的代码放在这里：

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

app.controller('MyCtrl', function($scope) {

  var cellNameEditable = 
  '<cell-template model=COL_FIELD input=COL_FIELD entity=row.entity></cell-template>';

  var cellNameDisplay = 
  '<div class="ngCellText" ng-class="col.colIndex()">{{row.getProperty(col.field)}}</div>';

  $scope.myData= [{"id":1,"code":"1","name":"Ain"},{"id":2,"code":"2","name":"Aisne"},{"id":3,"code":"3","name":"Allier"},{"id":4,"code":"5","name":"Hautes-Alpes"},{"id":5,"code":"4","name":"Alpes-de-Haute-Provence"},{"id":6,"code":"6","name":"Alpes-Maritimes"},{"id":7,"code":"7","name":"Ardèche"},{"id":8,"code":"8","name":"Ardennes"},{"id":9,"code":"9","name":"Ariège"},{"id":10,"code":"10","name":"Aube"}];
  $scope.gridOptions = { 
    data: 'myData',
    multiSelect: false,
    enableCellSelection: true,
    enableRowSelection: false,
    enableCellEditOnFocus: false,
    rowHeight: 100,
    columnDefs: [
        {field:'id', displayName:'Id', visible: false},
        {field:'code', displayName:'Code', enableCellEdit:true},
        {
            field:'name', displayName:'Name', enableCellEdit:true,
            cellTemplate: cellNameDisplay,
            editableCellTemplate: cellNameEditable
        }
      ]
    };
});

app.directive('cellTemplate', function () {

  var cellTemplate =
  '<div><form name="myForm" class="simple-form" novalidate>' +
  '<input type="text" name="myField" ng-input="localInput" ng-model="localModel" entity="entity" required/>' +
  '<span ng-show="myForm.myField.$error.required"> REQUIRED</span>' +
  'localModel = {{localModel}} localInput = {{localInput}} entity = {{entity}}' +
  '</form></div>';

  return {
    template: cellTemplate,
    restrict: 'E',
    scope: {
      localModel:'=model',
      localInput:'=input',
      entity:'=entity'
    },
    controller: function ($scope) {

      $scope.$on('ngGridEventStartCellEdit', function (event) {

        console.log('cellTemplate controller - ngGridEventStartCellEdit fired');

        $scope.oldEntity = angular.copy(event.currentScope.entity);
        $scope.oldValue = angular.copy(event.currentScope.localModel);
      });

      $scope.$on('ngGridEventEndCellEdit', function(event) {

        console.log('ngGridEventEndCellEdit fired');

        if(event.currentScope.myForm.$valid) {
          if(!angular.equals($scope.oldEntity, event.currentScope.entity)) {
              alert('data saved !');
          }
        } else {

          $scope.localModel = angular.copy($scope.oldValue);
          $scope.localInput = angular.copy($scope.oldValue);
          $scope.entity = angular.copy($scope.oldEntity);
        }
      });
    }
  };
});

然后解释：

我有一个ng-grid，基于名为“Excel-like Editing”的the official example 示例“但是enableCellEditOnFocus选项变为false。

单元格“name”在包含要处理的表单的指令中定义更新模型前的数据验证。

我想实现这种行为：当用户输入无效数据时，指令显示错误消息，当用户离开字段时，指令回滚数据。如果一切正常，那么我会更新数据。

回滚部分不起作用。在给定的plunker线67到72（这里给出的代码的最后一个块）它未能撤回数据。但我的绑定是“=”所以它应该。或者可能因为我在ngGridEventEndCellEdit事件中它会破坏链接吗？

我真的不明白为什么会失败。

所以要重现我的问题：在名称单元格中输入修改，删除显示所有数据，REQUIRED，然后从单元格中输出 - ＆gt;模特是没有回滚。

Answer 1

如果您使用自定义模板，则应发出 ngGridEventEndCellEdit事件。

我回滚数据时在ngGridEventEndCellEdit事件上的$ scope问题

1 个答案: