CODEWITHSUNDEEP
angularjs
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

passing an object as param in ng-click

I'm using angularjs datatable, and I've added action buttons to this datatable.

I have a button which I named Edit so this button will call a function with the current row informations in it as following :

<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>

which doesn't work, and this is the error I get :

error: [$parse:syntax] Syntax Error: Token 'Object' is unexpected, expecting []] at column 23 of the expression [openEditModal([object Object])] starting at [Object])].

But when I pass a param to my function as this : ng-click="openEditModal('+data.id+')" it works, but I want to pass the whole object.

This is the code of 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;
          }
        }
      });
    };

and this is 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');
      }
    };

and this is the code of my datatable controller :

.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 '';
          }
        })
    ];
  });

so here is the scenario I want, when I click on the update button this will trigger the ng-click="openEditModal('+data.id+')" and then this function will open a modal passing the user object to it, and the edit.tmpl.html will be populated with user object attributes.

How can I solve this ?

Upvotes: 1

Views: 2435

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

Update

I understood the problem, you can just fix that problem just by passing id to popup controller while opening. In current way you are trying to pass record data to popup directly from resolve option. By having such approach could introduce data inconsistency in your application.

Let me explain how that is possible?

Consider a scenario where user landed on page which has the table which you are displaying & then he stays there for suppose 10 mins, thereafter he open up on record. Here we go. Suppose you followed first approach of passing whole data from that particular record. so that will pop up on page..but that data might have changed by someone. and still you are showing old data, which will cause data inconsistency in your application.

In the approach which I'm suggesting will be pretty straight forward.. you are making ajax based on id to make sure data is consistent.. so that ajax might take few milliseconds(no performance impact), so less cost for consistent application is reasonable.. I think I'm clear with my point

Makrup

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

Upvotes: 3

Related Questions