Ng-show will not update when ng-click is inside div

Question

I have a DIV with ng-show.

When I run ng-click on an element outside of the DIV, it works fine and I can hide it.
When I run ng-click on an element inside of the DIV, it does not work. I can see the variable beeing changed when i console.log it, but the view will not update.
I have tried to use $scope.$apply() but it gets an error and says it is already running $apply().

Parts of controller:

    $scope.selectedActivity = {
        "dayNr": 0,
        "actNr": 0
    };

    $scope.resetSelectedActivity = function () {
        console.log("SelAct: ", $scope.selectedActivity);
        $scope.selectedActivity.dayNr = -1;
        $scope.selectedActivity.actNr = -1;
        console.log("SelAct: ", $scope.selectedActivity);
    };

    $scope.setSelectedActivity = function (dayNr, actNr) {
        console.log("SelAct: ", $scope.selectedActivity);
        $scope.selectedActivity.dayNr = dayNr;
        $scope.selectedActivity.actNr = actNr;
        console.log("SelAct: ", $scope.selectedActivity);
    };

Parts of HTML:

    <div ng-repeat="x in xs">
            <ion-scroll>
                <div ng-repeat="y in ys track by $index">

                    <div ng-click="setSelectedActivity($parent.$index, $index)">
                        <!--THE PROBLEM IS HERE-->
                        <div ng-show="selectedActivity.dayNr == $parent.$index && selectedActivity.actNr == $index">

                            <div>
                                <!--THIS LOGS OUT CORRECT VALUES BUT NG-SHOW IS NOT UPDATED-->
                                <div ng-click="resetSelectedActivity()">
                                    Reset
                                </div>
                            </div>

                        </div>
                        <div>
                            <img src="img/checkButtonOverlay.png" />
                        </div>
                    </div>
                    <!--THIS LOGS OUT CORRECT VALUES AND NG-SHOW _IS_ UPDATED-->
                    <button ng-click="resetSelectedActivity()">reset</button>
                </div>
            </ion-scroll>
        </div>

Please note that i have removed A LOT from the code because of confidentiality, but the principle should be the same.

Thank you!

It seems like $apply() would have helped, but I dont know how I can run it when its already running. — Otziii, Jan 14 '16 at 12:50
according to https://docs.angularjs.org/api/ng/directive/ngRepeat ngRepeat creates a new scope, so I guess when you update the variable it's only updated in the childscope — sch, Jan 14 '16 at 12:51
No. Thats not it unfortunately. I tried to see what parent and child printed, but it does not make a difference. — Otziii, Jan 14 '16 at 16:06
I had removed a little too much of the code. I put the correct code in the post in the last edit. Thanks for answering. :) — Otziii, Jan 14 '16 at 16:28
@klskl not in this case because of prototypal inheritance and the fact that he shares objects instead of simple properties. Have a look at this answer : http://stackoverflow.com/a/14049482/1251861 — Deblaton Jean-Philippe, Jan 14 '16 at 16:32

Otziii · Accepted Answer · 2016-01-14T16:51:11.463

4

Found the problem!

I had a ng-click that showed the DIV outside. When I clicked both ng-clicks got entered.

So First resetSelectedActivity() and then it got set again in setSelectedActivity().

Fixed it using:

<div ng-click="resetSelectedActivity($parent.$index, $index, $event)">
    ...
</div>

and:

$scope.setSelectedActivity = function (dayNr, actNr, event) {
    $scope.selectedActivity.dayNr = dayNr;
    $scope.selectedActivity.actNr = actNr;

    //This cancel the mouseclick
    event.stopPropagation();
};

edited Jan 14 '16 at 16:51

answered Jan 14 '16 at 16:27

Otziii

2,304
1
25
34

1

your `$event` is a javascript object, not related to angular. You should rather name it `event`. It's less confusing – Deblaton Jean-Philippe Jan 14 '16 at 16:35
Got the code from another stack overflow post, but good point. I agree. :) – Otziii Jan 14 '16 at 16:36
1

That's was excactly the problem, the event propagates like you can see in this fiddle: https://jsfiddle.net/abidibo/Lfcsao0h/ – abidibo Jan 14 '16 at 16:38
@DeblatonJean-Philippee: It is actually called $event in AngularJs. It's the same object, just another way of getting it: In ng-click you can send $event as parameter like this and it will get the javascript event: `
Test
` – Otziii Jan 14 '16 at 16:45
Found out that I did'nt need to send $event in ng-click. It works without the parameter. Just `event.stopPropagation();` – Otziii Jan 15 '16 at 09:41

Ng-show will not update when ng-click is inside div

1 Answers1