CODEWITHSUNDEEP
javascriptangularjscomponents
Docmur
Docmur

Reputation: 346

AngularJS Component - Function Binding

I wrote a table component:

<table ng-model="$ctrl.model" class="table" md-progress="promise">
<thead class="thead">
    <tr>
        <th class="theader">ID</th>
        <th class="theader">A</th>
        <th class="theader">Actions</th>
    </tr>
</thead>
<tbody>
    <tr md-row ng-repeat="row in $ctrl.data track by $index">
        <td width="15%" class="trow">{{row.id}}</td>
        <td width="15%" class="trow">{{row.a}}</td>
        <td width="15%" class="trow">
            <md-button ng-click="$ctrl.edit({x: row.id, y: row.a})"></md-button>                    
        </td>
    </tr>
</tbody>

I define the component as:

.component('tablesample', {
        require: {},
        templateUrl: 'Components/templates/tableSample.html',
        bindings: {
            data: '=',
            model: '=',
            edit: '&',
        },
        controller: function ($log) {
            var tbl = this;
            tbl.$onInit = function () {
            };
            tbl.$onChanges = function () {
            };
        }
    })

I call the new component as:

<tablesample data="tableData" model="selectedRow" edit="editFunction()"></tablesample>

Edit Function is defined as:

$scope.editFunction = function(x,y){
    console.clear();
    $log.info(x);
    $log.info(y); 
};

The log statements always display 'undefined' and I don't know why, row.id is populated, if I dump it I can see 1,2,3, etc.... Inside editFunction I do an http get so if x is undefined the call will fail.

Can anyone see what I did wrong?

Thanks D

Upvotes: 1

Views: 180

Answers (1)

Docmur
Docmur

Reputation: 346

I had to change:

<tablesample data="tableData" model="selectedRow" edit="editFunction()"></tablesample>

to:

<tablesample data="tableData" model="selectedRow" edit="editFunction(id,a)"></tablesample>

Thanks Docmur

Upvotes: 1

Related Questions