I currently have an array of data that is being shown using a directive within an ng-repeat. Whenever the user clicks on a button, a new object is added to this array which requires a new instance of the directive to be executed. Here is my current HTML setup:
<ul>
<li ng-repeat="c in commissions" commission="c.commission" index="{{$index}}"></li>
</ul>
Whenever the user clicks the "add" button, the following CoffeeScript function is triggered:
$scope.newCommission = function() {
var commission;
commission = {
new_commission: true
};
return $scope.commissions.push(commission);
};
This is my current directive:
var Commission;
Commission = function() {
return {
restrict: 'A',
replace: true,
templateUrl: '/assets/template/commission/list.html',
controller: 'ProductEditCtrl',
scope: {
commission: '=',
index: '@'
},
link: function(scope, el, attrs, ctrl) {
var commission;
commission = scope.commission;
commission.index = scope.index;
scope.editable = false;
scope.changeType = function(type) {
return commission.type = type;
};
scope.removeCommission = function() {
return ctrl.deleteCommission(commission.index, commission.id);
};
scope.saveCommission = function() {
var obj;
obj = {
seller_id: commission.seller.id,
type: commission.type,
value: commission.value
};
ctrl.changeCommission(commission.id, obj);
return scope.editable = false;
};
return scope.turnEditable = function() {
return scope.editable = true;
};
}
};
};
angular.module('horus.products').directive('commission', Commission);
Here's what's happening - a new item is added to my list and the template from my directive is compiled, but it throws an error:
TypeError: Cannot set property 'index' of undefined at link () at at nodeLinkFn () at delayedNodeLinkFn () at compositeLinkFn () at publicLinkFn () at boundTranscludeFn () at controllersBoundTransclude () at ngRepeatAction () at Object.$watchCollectionAction [as fn] ()
Any thoughts on why this issue is happening and how I can resolve it? Is there a better way to add a new directive in an ng-repeat?