angularjs: issue while setting scope member when in a ng-repeat

Question

I face a very weird issue I cannot find my way out to fix it.

I've got $scope.categoryId used in a system menu to point to the current category.

In a ng-repeat thru categories, I have a ng-click that sets the current category, but doesn't work. Even more weird, if I place a standalone tag, the thing works.

Code snippet is as follows:

<!-- click manages to inc -->
<p ng-click="categoryId = categoryId+1">++ : {{categoryId}}</p>

<!-- click doesn't manage to inc -->
<p 
    ng-repeat="c in categories"
    ng-click="categoryId = categoryId+1">
        {{$index}} : {{categoryId}}
</p>

Any idea?

can you post your controller? most probably is a problem due to the fact that ng-repeat creates a new scope. — klode, Jun 12 '14 at 19:57
Sorry but it works for me...I used a test array instead of categories http://plnkr.co/edit/JchT0GrkVjVUSzsLctxO?p=preview — Srinath Mandava, Jun 12 '14 at 20:00
@klode Sounds it is creating a new scope. I tried to mock up a fiddle, but alas, it works in my fiddle. My controller is large. One thing I see is the fact that the class="ng-scope" is present in the repeater, but not in the standalone p tag. What does it mean? — Stéphane de Luca, Jun 12 '14 at 20:03

Adarsh Konchady · Answer 1 · 2015-01-20T06:24:42.720

2

ng-repeat will create a new scope. This might be the reason for your problem

A possible solution to this would be to create an object in the controller and then map this "categoryId" as a property of that object as follows:

//In Controller var dummyObj = new Object(); dummyObj.categoryId = //some value

//In View <p ng-repeat="c in categories" ng-click="dummyObj.categoryId = dummyObj.categoryId+1"> {{$index}} : {{dummyObj.categoryId}} </p>

This should solve the problem you are facing.

edited Jan 20 '15 at 06:24

answered Jun 12 '14 at 20:07

Adarsh Konchady

2,577
5
30
50

Got it. But why in this case a new scope doesn't affect the dummyObj.categoryId? Sounds like there is one rule I'm missing regarding hg-repeat. In this fiddle (http://jsfiddle.net/stephanedeluca/8UxY9/) I didn't manage to to create the same issue than in my project. Why? – Stéphane de Luca Jun 12 '14 at 20:15
Something to do with the way Angular handles it's scope variables and objects. When a new scope is created, it pushes the scope variables into a child scope. So you can find these variables in the $$childTail property of the current scope. However this behaviour doesn't exist for scope objects. – Adarsh Konchady Jun 14 '14 at 21:45
Just found an excellent answer on the same issue. See the following link for more details on why and how scoping works that way. http://stackoverflow.com/a/14049482/802651 – Adarsh Konchady Feb 12 '15 at 06:51

score 0 · Accepted Answer · answered Jun 12 '14 at 20:05

0

One thing I see is the fact that the class="ng-scope" is present in the repeater, but not in the standalone p tag. What does it mean?

ng-repeat creates a new scope

categoryId should refer to the parent scope.

   <!-- click doesn't manage to inc -->
    <p 
        ng-repeat="c in [1,2,3]"
        ng-click="$parent.categoryId = $parent.categoryId+1">
            {{$index}} : {{$parent.categoryId}}
    </p>

answered Jun 12 '14 at 20:05

mpm

20,148
7
50
55

You're right. That fixes the issue. The lesson: if I see a ng-scop class, this means a new scope has been create, right? One question though: why a new scope is created?? – Stéphane de Luca Jun 12 '14 at 20:09
Yep,one tip to debug this kind of stuff is create a css class .ng-scope and add a red border.That way one can see all the scopes in the current page. – mpm Jun 12 '14 at 20:11

angularjs: issue while setting scope member when in a ng-repeat

2 Answers2