我该如何解决这个问题？

Question

我正在使用angularjs数据表，我已经为此数据表添加了操作按钮。

我有一个名为Edit的按钮，因此该按钮将调用一个函数，其中包含当前行信息，如下所示：

<button class="btn btn-bl btn-success btn-ef btn-ef-5 btn-ef-5b mb-10" ng-click="openEditModal('+data+')"><i class="fa fa-trash"></i> <span>'+$scope.update+'</span></button>

哪个不起作用，这是我得到的错误：

错误：[$ parse：syntax]语法错误：令牌'对象'是意外的，在表达式[openEditModal（[对象]的第23列）期待[] 对象]）]从[Object]开始]。

但是当我将一个param传递给我的函数时：ng-click="openEditModal('+data.id+')"它有效，但我想传递整个对象。

这是openEditModal()的代码：

$scope.openEditModal = function(user) {
      $scope.user = user;
      console.log($scope.user);
      $uibModal.open({
        templateUrl: 'edit.tmpl.html',
        controller: 'EditModalInstanceCtrl',
        size: 'lg',
        resolve: {
          user: function () {
            return $scope.user;
          }
        }
      });
    };

这是EditModalInstanceCtrl：

.controller('EditModalInstanceCtrl', function ($scope, $uibModalInstance, user,$state) {
    $scope.user = user;
    // function to submit the form after all validation has occurred
    $scope.confirmEdit = function(isValid) {
      // check to make sure the form is completely valid
      if (isValid) {
        console.log('our form is amazing');
        $uibModalInstance.close();
        console.log(user);
        $state.go($state.current, {}, {reload: true});
      } else {
        console.log('form is invalid');
      }
    };

这是我的数据表控制器的代码：

.controller('CandidaturesDatatableCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.fromSource('http://www.filltext.com/?rows=10&id={index}&firstname={firstName}&lastname={lastName}&city={city}&contactemail={email}&message={lorem|50}&pretty=true')
      .withPaginationType('full_numbers')
      .withBootstrap()
      // Active Responsive plugin
      .withOption('responsive', true)
      .withOption('initComplete', function(settings) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element('#' + settings.sTableId).contents())($scope);
      });
    vm.dtColumns = [
      DTColumnBuilder.newColumn('id').withTitle('ID'),
      DTColumnBuilder.newColumn('firstname').withTitle('First name'),
      DTColumnBuilder.newColumn('lastname').withTitle('Last name'),
      // .notVisible() does not work in this case. Use .withClass('none') instead
      DTColumnBuilder.newColumn('city').withTitle('City'),
      DTColumnBuilder.newColumn('contactemail').withTitle('Email'),
      DTColumnBuilder.newColumn('message').withTitle('Message').withClass('none'),
      DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
        .renderWith(function(data, type, full, meta) {
          if (true) {
            return  '<button class="btn btn-bl btn-success btn-ef btn-ef-5 btn-ef-5b mb-10" ng-click="openEditModal('+data+')"><i class="fa fa-trash"></i> <span>'+$scope.update+'</span></button>&nbsp;'
              + '<button class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5b mb-10" ng-click="openDeleteModal('+data.id+')"><i class="fa fa-trash"></i> <span>'+$scope.delete+'</span></button>';
          } else {
            return '';
          }
        })
    ];
  });

所以这就是我想要的场景，当我点击更新按钮时会触发ng-click="openEditModal('+data.id+')"，然后这个函数会打开一个模态，将用户对象传递给它，而edit.tmpl.html将会填充用户对象属性。

我该如何解决这个问题？

Answer 1

的更新

我理解了这个问题，你可以通过在打开时将id传递给弹出控制器来解决这个问题。以当前方式，您尝试直接从resolve选项将记录数据传递给弹出窗口。通过这种方法可能会在您的应用程序中引入数据不一致。

让我解释一下这是怎么回事？

考虑用户登陆页面的情况，该页面包含您正在显示的表格。然后他停留在那里假设10分钟，此后他打开记录。开始了。假设您遵循从该特定记录传递整个数据的第一种方法。这样会弹出页面..但是这些数据可能已被某人更改。并且您仍在显示旧数据，这将导致应用程序中的数据不一致。

我建议的方法非常简单..你基于id制作ajax以确保数据一致..所以ajax可能需要几毫秒（没有性能影响），所以更少一致申请的费用是合理的..我想我明白我的观点

<强> Makrup

ng-click="openEditModal('+data.id+')" //pass id and retrieve data again in popup controller

在ng-click中将对象作为参数传递

我该如何解决这个问题？

1 个答案:

的更新