How to use directive inside ng-repeat?

Question

I want to use a counter http://plnkr.co/edit/eRWPuEP8LdQBbHksIL3S?p=info directive inside ng-repeat like

<div ng-repeat="item in items">
    <div counter value="item" min="1" max="30" step="3" editable></div>
</div>

in my controller

$scope.items = []
items.push(1);
items.push(2);

But it is not working.

Edit:1

in my controller

$scope.items = []
$scope.items.push(1);
$scope.items.push(2);

Edit 2:

My Plunkr : http://plnkr.co/edit/ji2ppBp0PyRCzAT4UhMj?p=preview

`$scope.items.push(1)`... Could you post a plnkr of your attempt? — JLRishe, Jan 03 '15 at 16:16
Yeah ,It was `$scope.items.push(1)` I write it mistakenly. But directive is not working inside ng-repeat — EmptyData, Jan 03 '15 at 16:19
@EmptyData Could you show us the plnkr where you actually tried it? — JLRishe, Jan 03 '15 at 16:20
@JLRishe I have added my plunkr above http://plnkr.co/edit/ji2ppBp0PyRCzAT4UhMj?p=preview — EmptyData, Jan 03 '15 at 16:24
it looks like the binding inside the directive isn't two way. — Raphael Müller, Jan 03 '15 at 16:26
Take a look at this [SO post][1] Possibly a duplicate question [1]: http://stackoverflow.com/questions/16502559/angular-js-using-a-directive-inside-an-ng-repeat-and-a-mysterious-power-of-sco — Gerald, Jan 03 '15 at 16:45
@RaphaelMüller, it's 2-way binding, but just can't change a primitive type value in parent scope. — hjl, Jan 03 '15 at 17:21
@EmptyData, could you pls also upvote my answer if it's helpful to you, thanks — hjl, Jan 03 '15 at 18:05

hjl · Accepted Answer · 2015-01-03T17:17:08.523

ng-repeat creates a child scope, item is passed to the child scope as a primitive type. even you isolates the scope in your directive with 2-way binding for value, the value will not be changed, ie. scope.items is always [1, 2]

solution is to pass an object (reference) to child scope, to achieve this:

$scope.items = []
$scope.items.push({val:1});
$scope.items.push({val:2});

// template of counter directive
<input type="text" class="counter-field" ng-model="value.val">

var setValue = function( val ) {
    scope.value.val = parseInt( val );
};

you might also need to change minus and plus methods to refer to scope.value.val

How to use directive inside ng-repeat?

1 Answers1