3

I have a DIV with ng-show.

  1. When I run ng-click on an element outside of the DIV, it works fine and I can hide it.

  2. 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.

  3. 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!

Improve this question
5
  • It seems like $apply() would have helped, but I dont know how I can run it when its already running. Commented Jan 14, 2016 at 12:50
  • according to 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 Commented Jan 14, 2016 at 12:51
  • No. Thats not it unfortunately. I tried to see what parent and child printed, but it does not make a difference. Commented Jan 14, 2016 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. :) Commented Jan 14, 2016 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 : stackoverflow.com/a/14049482/1251861 Commented Jan 14, 2016 at 16:32

1 Answer 1

Reset to default
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(); };
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

your $event is a javascript object, not related to angular. You should rather name it event. It's less confusing
Got the code from another stack overflow post, but good point. I agree. :)
That's was excactly the problem, the event propagates like you can see in this fiddle: jsfiddle.net/abidibo/Lfcsao0h
@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: <div ng-click="testFunction($event)"> Test </div>
Found out that I did'nt need to send $event in ng-click. It works without the parameter. Just event.stopPropagation();

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.