Pass information between directive and controller angularjs

Question

I have the next directive

  angular
  .module('01')
  .directive('tableSortable', tableSortable);

/** @ngInject */
function tableSortable() {
return {
  restrict: 'E',
  transclude: true,
  templateUrl: 'app/components/tabla/tableSortable.html',
  scope: {
    columns: '=',
    data: '=',
    sort: '=',
    onclickRow: '='
  }

and I have the next html that shows a table

<tbody>
<tr  ng-click="click(object)" ng-repeat="object in data | orderBy:sort.column:sort.descending | orderBy:sort.column:sort.descending | startFrom:currentPage*pageSize | limitTo:pageSize">
  <td
    ng-repeat="key in object"
    ng-if="key != '$$hashKey'" >
    {{object[columns[$index].variable] | customFilter : getFilterOfColumn(columns[$index].variable)}}
  </td>
</tr>
 </tbody>

I have this other html where I call the directive

  <table-sortable onclick-row="main.onclickRow(msg)"
    columns="main.columnsBusquedas" data="main.rowsBusquedas" sort="main.sortBusquedas">
    </table-sortable>

And this controller with a function onclickRow(msg) where I want to take the row that the users click on

function onclickRow(msg){
  $log.debug(msg);
}

This code didn't work... Could you help me please?

Thanks.

Shouldn't the ng-click in the template be calling onclickRow(...) rather than click(...)? And also I think you need to pass the object parameter via an object {msg: object} — haggisandchips
– haggisandchips, Commented Oct 27, 2016 at 15:19

ngCoder · Accepted Answer · 2016-10-28 05:22:59Z

1

Change your directive part where you bind function, you should use & instead of =

function tableSortable() {
return {
  restrict: 'E',
  transclude: true,
  templateUrl: 'app/components/tabla/tableSortable.html',
  scope: {
    columns: '=',
    data: '=',
    sort: '=',
    click: '&onclickRow' // this how we call function from directive...
  }

In HTML change your ng-click like below..

<tbody>
<tr  ng-click="click({'msg':object})" ng-repeat="object in data | orderBy:sort.column:sort.descending | orderBy:sort.column:sort.descending | startFrom:currentPage*pageSize | limitTo:pageSize">
  <td
    ng-repeat="key in object"
    ng-if="key != '$$hashKey'" >
    {{object[columns[$index].variable] | customFilter : getFilterOfColumn(columns[$index].variable)}}
  </td>
</tr>
 </tbody>

edited Oct 28, 2016 at 5:22

answered Oct 27, 2016 at 15:13

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass information between directive and controller angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related